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，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，样例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

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);

原文出自： www.hangge.com   转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1761.html