参考:
React Native - Keyboard API使用详解(监听处理键盘事件)
当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入。
但有时我们想在键盘弹出时对页面布局做个调整,
或者在程序中使用代码收起这个软键盘,这些借助 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,dismiss()
这个方法让操作系统收起软键盘。
二、event 参数值
所有的键盘事件处理函数都能收到一个 event 参数,不过在不同平台下 event 参数可以取到的值不太一样。
1,Android 平台可以取到的值
event.endCoordinates.screenXevent.endCoordinates.screenYevent.endCoordinates.widthevent.endCoordinates.height2,iOS 平台可以取到的值
event.easing:这个值始终是 keyboardevnet.duration:记录软键盘弹出动画的持续事件,单位是毫秒event.startCoordinates.screenXevent.startCoordinates.screenYevent.startCoordinates.widthevent.startCoordinates.heightevent.endCoordinates.screenXevent.endCoordinates.screenYevent.endCoordinates.widthevent.endCoordinates.height三、使用样例
1,效果图
(1)在组件加载时就开始监听虚拟键盘的弹出/隐藏事件,一旦虚拟键盘状态发生变化,输入框下方便会实时显示当前状态。
(2)虚拟键盘打开后,除了点击键盘上的“完成”按钮外可以收起键盘外。点击输入框右侧的“收起键盘”按钮也可以达到同样效果。
2,样例代码:
import React, {Component} from 'react';import {AppRegistry,StyleSheet,TextInput,View,Text,Keyboard,} from 'react-native';const TAG = 'KeyboardTest=============';export default class 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,});this.printLog('show', event);}//键盘隐藏事件响应keyboardDidHideHandler(event) {this.setState({KeyboardShown: false,});this.printLog('hide', event);}//强制隐藏键盘dismissKeyboard() {Keyboard.dismiss();console.log(TAG, '输入框当前焦点状态:' + this.refs.bottomInput.isFocused());}printLog(method, event) {console.log(TAG, method, ' endCoordinates.screenX=', event.endCoordinates.screenX);console.log(TAG, method, ' endCoordinates.screenY=', event.endCoordinates.screenY);console.log(TAG, method, ' endCoordinates.width=', event.endCoordinates.width);console.log(TAG, method, ' endCoordinates.height=', event.endCoordinates.height);// console.log(TAG, method, ' startCoordinates=', event.startCoordinates.screenX);// console.log(TAG, method, ' startCoordinates=', event.startCoordinates.screenY);// console.log(TAG, method, ' startCoordinates=', event.startCoordinates.width);// console.log(TAG, method, ' startCoordinates=', event.startCoordinates.height);console.log('=================================================================');}render() {return (<View style={[styles.container]}><View style={[styles.flexDirection, styles.inputHeight]}><TextInput style={styles.textInputStyle} ref="bottomInput"/><Text style={styles.buttonStyle}onPress={this.dismissKeyboard.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',},});
3,打印日志:
//打开键盘'KeyboardTest=============', 'show', ' endCoordinates.screenX=', 0'KeyboardTest=============', 'show', ' endCoordinates.screenY=', 279.6666564941406'KeyboardTest=============', 'show', ' endCoordinates.width=', 360'KeyboardTest=============', 'show', ' endCoordinates.height=', 316.3333435058594=================================================================//键盘上的关闭按钮'KeyboardTest=============', 'hide', ' endCoordinates.screenX=', 0'KeyboardTest=============', 'hide', ' endCoordinates.screenY=', 572'KeyboardTest=============', 'hide', ' endCoordinates.width=', 360'KeyboardTest=============', 'hide', ' endCoordinates.height=', 0=================================================================//打开键盘'KeyboardTest=============', 'show', ' endCoordinates.screenX=', 0'KeyboardTest=============', 'show', ' endCoordinates.screenY=', 279.6666564941406'KeyboardTest=============', 'show', ' endCoordinates.width=', 360'KeyboardTest=============', 'show', ' endCoordinates.height=', 316.3333435058594=================================================================//rn强制关闭键盘'KeyboardTest=============', '输入框当前焦点状态:false''KeyboardTest=============', 'hide', ' endCoordinates.screenX=', 0'KeyboardTest=============', 'hide', ' endCoordinates.screenY=', 572'KeyboardTest=============', 'hide', ' endCoordinates.width=', 360'KeyboardTest=============', 'hide', ' endCoordinates.height=', 0=================================================================