1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > React Native - Keyboard API使用详解(监听处理键盘事件)

React Native - Keyboard API使用详解(监听处理键盘事件)

时间:2021-11-14 17:19:29

相关推荐

React Native - Keyboard API使用详解(监听处理键盘事件)

参考:

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.screenXevent.endCoordinates.screenYevent.endCoordinates.widthevent.endCoordinates.height

2,iOS 平台可以取到的值

event.easing:这个值始终是 keyboardevnet.duration:记录软键盘弹出动画的持续事件,单位是毫秒event.startCoordinates.screenXevent.startCoordinates.screenYevent.startCoordinates.widthevent.startCoordinates.heightevent.endCoordinates.screenXevent.endCoordinates.screenYevent.endCoordinates.widthevent.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=================================================================

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。