React Native - Keyboard API使用详解(监听处理键盘事件)
2017-10-20 16:31
1226 查看
当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入。但有时我们想在键盘弹出时对页面布局做个调整,或者在程序中使用代码收起这个软键盘,这些借助 React Native 框架提供的Keyboard API 就可以实现。
keyboardWillShow:软键盘将要显示
keyboardDidShow:软键盘显示完毕
keyboardWillHide:软键盘将要收起
keyboardDidHide:软键盘收起完毕
keyboardWillChangeFrame:软件盘的 frame 将要改变
keyboardDidChangeFrame:软件盘的 frame 改变完毕
(2)这个函数返回一个对象。我们可以保存这个对象,在需要释放事件监听器时,调用这个对象的 remove 方法。
event.endCoordinates.screenY
event.endCoordinates.width
event.endCoordinates.height
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
(2)虚拟键盘打开后,除了点击键盘上的“完成”按钮外可以收起键盘外。点击输入框右侧的“收起键盘”按钮也可以达到同样效果。
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1761.html
一、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.screenXevent.endCoordinates.screenY
event.endCoordinates.width
event.endCoordinates.height
2,iOS 平台可以取到的值
event.easing:这个值始终是 keyboardevnet.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,样例代码
相关文章推荐
- 使用SoftKeyBoardAdapter监听处理软键盘弹出事件
- React Native 触摸事件处理详解
- vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
- 详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
- React-Native - 使用AppState获取App运行状态(以及监听状态改变事件)
- 《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView
- React Native 触摸事件处理详解
- iOS自动处理键盘事件的第三方库:IQKeyboardManager
- Java Swing界面编程(24)---事件处理:键盘事件及监听处理
- IQKeyBoardManager轻松处理键盘事件
- EXTJS4.0 页面间传值 监听事件的使用 值处理
- 使用中文输入法时对键盘事件的处理
- 使用arguments对象处理兼容各浏览器的键盘按钮事件
- iOS移动开发中监听键盘移动的事件,自动调整view-(1)-UIKeyboardFrameEndUserInfoKey
- Android的事件处理机制详解(一)-----基于监听的事件处理机制
- iOS自动处理键盘事件的第三方库:IQKeyboardManager
- iOS自动处理键盘事件的第三方库:IQKeyboardManager
- Python中使用PyHook监听鼠标和键盘事件实例
- 非常高效的文件处理 API 和 CFile 的使用详解
- 对 键盘 事件 监听NSNotification 处理相应页面 变化UIKeyboardAnimation