React Native - Keyboard API使用详解(监听处理键盘事件)
作者:hangge | 2017-09-08 08:10
当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入。但有时我们想在键盘弹出时对页面布局做个调整,或者在程序中使用代码收起这个软键盘,这些借助 React Native 框架提供的 Keyboard API 就可以实现。
一、Keyboard API 提供的方法
Keyboard API 提供如下的静态函数供开发者使用。
1,addListener(eventName, callback)
(1)这个函数用来加载一个指定事件的事件监听器,函数中的 eventName 可以是如下值:
- keyboardWillShow:软键盘将要显示
- keyboardDidShow:软键盘显示完毕
- keyboardWillHide:软键盘将要收起
- keyboardDidHide:软键盘收起完毕
- keyboardWillChangeFrame:软件盘的 frame 将要改变
- keyboardDidChangeFrame:软件盘的 frame 改变完毕
(2)这个函数返回一个对象。我们可以保存这个对象,在需要释放事件监听器时,调用这个对象的 remove 方法。
2,removeListener(eventName, callback)
这个函数用来释放一个特定的键盘事件监听器。
3,removeAllListener(eventName)
这个函数用来释放一个指定键盘事件的所有事件监听器。
4,dissmiss()
这个方法让操作系统收起软键盘。
二、event 参数值
所有的键盘事件处理函数都能收到一个 event 参数,不过在不同平台下 event 参数可以取到的值不太一样。
1,Android 平台可以取到的值
- event.endCoordinates.screenX
- event.endCoordinates.screenY
- event.endCoordinates.width
- event.endCoordinates.height
2,iOS 平台可以取到的值
- event.easing:这个值始终是 keyboard
- evnet.duration:记录软键盘弹出动画的持续事件,单位是毫秒
- event.startCoordinates.screenX
- event.startCoordinates.screenY
- event.startCoordinates.width
- event.startCoordinates.height
- event.endCoordinates.screenX
- event.endCoordinates.screenY
- event.endCoordinates.width
- event.endCoordinates.height
三、使用样例
1,效果图
(1)在组件加载时就开始监听虚拟键盘的弹出/隐藏事件,一旦虚拟键盘状态发生变化,输入框下方便会实时显示当前状态。
(2)虚拟键盘打开后,除了点击键盘上的“完成”按钮外可以收起键盘外。点击输入框右侧的“收起键盘”按钮也可以达到同样效果。
2,样例代码
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, View, Text, Keyboard } from 'react-native'; class Main extends Component { constructor(props){ super(props); this.keyboardDidShowListener = null; this.keyboardDidHideListener = null; this.state = { KeyboardShown: false}; } componentWillMount() { //监听键盘弹出事件 this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShowHandler.bind(this)); //监听键盘隐藏事件 this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHideHandler.bind(this)); } componentWillUnmount() { //卸载键盘弹出事件监听 if(this.keyboardDidShowListener != null) { this.keyboardDidShowListener.remove(); } //卸载键盘隐藏事件监听 if(this.keyboardDidHideListener != null) { this.keyboardDidHideListener.remove(); } } //键盘弹出事件响应 keyboardDidShowHandler(event) { this.setState({KeyboardShown: true}); console.log(event.endCoordinates.height); } //键盘隐藏事件响应 keyboardDidHideHandler(event) { this.setState({KeyboardShown: false}); } //强制隐藏键盘 dissmissKeyboard() { Keyboard.dismiss(); console.log("输入框当前焦点状态:" + this.refs.bottomInput.isFocused()); } render() { return ( <View style={[styles.container]}> <View style={[styles.flexDirection, styles.inputHeight]}> <TextInput style={styles.textInputStyle} ref="bottomInput" /> <Text style={styles.buttonStyle} onPress={this.dissmissKeyboard.bind(this)}> 收起键盘 </Text> </View> <Text> 当前键盘状态:{this.state.KeyboardShown ? "打开" : "关闭"} </Text> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, paddingTop:15 }, flexDirection:{ flexDirection:'row' }, inputHeight:{ height:35, alignItems: 'center' }, textInputStyle:{ flex:1, height:35, fontSize:18, }, buttonStyle:{ fontSize:20, color:'white', width:100, textAlign:'center', backgroundColor:'#4CA300' }, }); AppRegistry.registerComponent('HelloWorld', () => Main);
全部评论(0)