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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
JavaScript组合模式---引入案例分析
May 23 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
js实现筛选功能
2020/11/24 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python range与enumerate函数区别解析
2020/02/28 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
饲料采购员岗位职责
2013/12/19 职场文书
活动总结格式范文
2014/04/26 职场文书
体育活动总结范文
2014/05/04 职场文书
文明寝室标语
2014/06/13 职场文书