参考：

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.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';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
=================================================================

React Native - Keyboard API使用详解（监听处理键盘事件）相关推荐

element-ui 搜索框组件：监听input键盘事件 - 代码篇
踩坑:vue + element-ui 框架监听input键盘事件 - 含demo演示代码示下: html部分: <el-inputplaceholder="职位 | 地区 | 工作 ...
Java中使用JNA实现全局监听Linux键盘事件
title: Java中使用JNA实现全局监听Linux键盘事件 date: 2019-05-03 19:08:00 Java中使用JNA实现全局监听Linux键盘事件用JNA实现的键盘监听,在Wi ...
Java中使用JNA实现全局监听Windows键盘事件
title: Java中使用JNA实现全局监听Windows键盘事件 date: 2019-05-02 21:55:00 Java中使用JNA实现全局监听Windows键盘事件前言: 一直打算做一个 ...
python pyhook监听扫码_Python——pyHook监听鼠标键盘事件
pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...
[Flex]Flex编程注意之自动获取焦点、监听全局键盘事件
http://www.k-zone.cn/zblog/post/flex-air-auto-set-focus.html 这是<Flex第一步>群里面一个朋友问我的问题,特此拿出分享一下. ...
Java_基础—GUI(窗体/鼠标/键盘/动作监听和键盘事件)
一.窗体监听 Frame f = new Frame("我的窗体"); //事件源是窗体,把监听器注册到事件源上 //事件对象传递给监听器 package com.soar.gui ...
C#全局监听Windows键盘事件
本方法只涉及到如何应用现有工具类实现监听,其具体的原理主要涉及到调用Windows底层API:定义一个钩子钩住键盘事件,在这里不讲具体原理. 1.工具类代码引用 using System; usin ...
react native bundle读取assets_react-native-easy-app 详解与使用之（一）AsyncStorage
react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android),特别是在从0到1的项目搭建初期,至少可以 ...
React Native和Android整合详解
前言按照React Native的迭代速度,使用官网的文档,已经不能很顺利的实现React Native和Android的有效整合.React Native最新版本已经是0.39.为了更好的讲解R ...