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

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  (


        "bottomInput"  />

          onPress={ this .dissmissKeyboard.bind( this )}>
          收起键盘



        当前键盘状态：{ this .state.KeyboardShown ?  "打开"  :  "关闭" }


   );
  }
}

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