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

React / React Native