React Native Keyboard API

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiashiqi_blog/article/details/83747379

一、Keyboard API

当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入。React Native 框架提供的Keyboard API可以实现对键盘事件进行监听,能够检测到键盘的弹出与收回,从而对布局做出相应的调整,并可以通过代码关闭虚拟键盘。

1. addListener(eventName, callback)

这个函数用来加载一个指定事件的事件监听器,该函数返回一个对象。开发者可以保存该对象。在需要释放事件监听器时,调用该对象的remove方法。其中addListener函数中的 eventName 可以为:
1) keyboardWillShow:软键盘将要显示
2) keyboardDidShow:软键盘显示完毕
3) keyboardWillHide:软键盘将要收起
4) keyboardDidHide:软键盘收起完毕
5) keyboardWillChangeFrame:软件盘的 frame 将要改变
6) keyboardDidChangeFrame:软件盘的 frame 改变完毕

1.1 监控键盘事件的例程

componentWillMount(){
    /*监听键盘弹出事件,并保存返回的对象用于解绑*/
    this.keybordDidShowListener=Keyboard.addListener('keyboardDidShow',
      this.keybordDidShowHandler.bind(this));
    /*监听键盘收回事件,并保存返回的对象用于解绑*/
    this.keybordDidHideListener=Keyboard.addListener('keyboardDidHide',
      this.keybordDidHideHandler.bind(this));
  }
  //键盘弹出事件响应
  keybordDidShowHandler(event) {
    this.setState({ KeyboardShown: true });
  }
  //键盘隐藏事件响应
  keybordDidHideHandler(event) {
    this.setState({ KeyboardShown: false });
  }
  componentWillUnmount(){
    if(this.keybordDidShowListener!==null){
      this.keybordDidShowListener.remove()
    }
    if(this.keybordDidHideListener!==null){
      this.keybordDidHideListener.remove()
    }
  }
   render(){
    return(
      <View style={[styles.container,this.state.KeyboardShown && styles.bumpedContainer]}>
        按照键盘是否弹出控制窗口样式
      </View>
    )
  }

1.2 event 参数值

在Android、ios平台,所有的键盘事件处理函数都能收到一个 event 参数,不过在不同平台下 event 参数可以取到的值不太一样。

1.2.1 Android 平台可以取到的值:

1)event.endCoordinates.screenX
2)event.endCoordinates.screenY
3)event.endCoordinates.width
4)event.endCoordinates.height

1.2.2 iOS 平台可以取到的值

1)event.easing:这个值始终是 keyboard
2)evnet.duration:记录软键盘弹出动画的持续事件,单位是毫秒
3)event.startCoordinates.screenX
4)event.startCoordinates.screenY
5)event.startCoordinates.width
6)event.startCoordinates.height
7)event.endCoordinates.screenX
8)event.endCoordinates.screenY
9)event.endCoordinates.width
10)event.endCoordinates.height

2. removeListener(eventName, callback)与removeAllListener(eventName)

用来释放键盘事件监听器,在开发中还是使用前面提到的remove方法较多

3. 收起软件盘dismiss()

onDismissKeyboard(){
      Keyboard.dismiss();
}
....
<View style={[styles.flex, styles.topStatus]}>
       <TouchableOpacity activeOpacity={1.0} onPress={this.onDismissKeyboard.bind(this)}>
                    ...
        </TouchableOpacity>
</View>

如果点击事件控件使用的是TouchableOpacity,如果不想看到点击效果的话,记得设置激活的透明度为1

展开阅读全文

没有更多推荐了,返回首页