ReactNative之键盘Keyboard的弹出与消失示例


Posted in Javascript onJuly 11, 2017

在开发中经常遇到需要输入的地方,所以就学习了一下ReactNative键盘Keyboard的弹出与消失的方法,留个笔记。

今天我们来说下RN对键盘事件的支持。

在React-native 的Component组件中有个Keyboard.

github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard

我们先来看下官方提供的例子,监听键盘的弹出与消失。Demo如下:

import React, { Component } from 'react'; 
import { Keyboard, TextInput } from 'react-native'; 
 
class Example extends Component { 
 componentWillMount () { 
  this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); 
  this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide); 
 } 
 
 componentWillUnmount () { 
  this.keyboardDidShowListener.remove(); 
  this.keyboardDidHideListener.remove(); 
 } 
 
 _keyboardDidShow () { 
  alert('Keyboard Shown'); 
 } 
 
 _keyboardDidHide () { 
  alert('Keyboard Hidden'); 
 } 
 
 render() { 
  return ( 
   <TextInput 
    onSubmitEditing={Keyboard.dismiss} 
   /> 
  ); 
 } 
}

Keyboard支持的监听事件如下:

@param {string} nativeEvent The `nativeEvent` is the string that identifies the event you're listening for. This can be any of the following: 
- `keyboardWillShow` 
- `keyboardDidShow` 
- `keyboardWillHide` 
- `keyboardDidHide` 
- `keyboardWillChangeFrame` 
- `keyboardDidChangeFrame`

使用的时候需要测试下Android和iOS下监听的事件是否都ok。

踩坑如下:

android 对keyboardWillShow 监听不到。

同样,我们在源码里可以找到使键盘消失的函数

/** 
 * Dismisses the active keyboard and removes focus. 
 */ 
dismiss () { 
 dismissKeyboard(); 
}

我们如果需要使用时,可以如下:

const dismissKeyboard = require('dismissKeyboard'); 
dismissKeyboard();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
js post方式传递提交的实现代码
May 31 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
React事件处理的机制及原理
Dec 03 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 #Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 #Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 #Javascript
使用jQuery实现动态添加小广告
Jul 11 #jQuery
Vue中父组件向子组件通信的方法
Jul 11 #Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 #Javascript
网页中的图片查看器viewjs使用方法
Jul 11 #Javascript
You might like
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
js 字符串操作函数
2009/07/25 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python自动生成model文件过程详解
2019/11/02 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
运动会稿件200字
2014/02/07 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
党员带头倡议书
2015/04/29 职场文书
学校体育节班级口号
2015/12/25 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
python Tkinter的简单入门教程
2021/04/11 Python