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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
Websocket 向指定用户发消息的方法
Jan 09 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
将PHP作为Shell脚本语言使用
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php递归函数怎么用才有效
2018/02/24 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
js实现简单的验证码
2015/12/25 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python for循环及基础用法详解
2019/11/08 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python下载的库包存放路径
2020/07/27 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
师德学习感言
2014/01/31 职场文书
趣味比赛活动方案
2014/02/15 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
单位单身证明样本
2014/10/11 职场文书
社区文明倡议书
2015/04/28 职场文书
自信主题班会
2015/08/14 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫