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实现手把手教你月入万刀(转贴)
Nov 07 Javascript
js 内存释放问题
Apr 25 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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
php缓存技术详细总结
2013/08/07 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Python发送Email方法实例
2014/08/21 Python
Python实现多行注释的另类方法
2014/08/22 Python
python简单实现计算过期时间的方法
2015/06/09 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
Django 路由控制的实现代码
2018/11/08 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
入党自我评价优缺点
2014/01/25 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
2014年学生会工作总结
2014/11/07 职场文书
大学生村官入党自传
2015/06/26 职场文书
爱国主题班会教案
2015/08/14 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python