ReactNative之键盘Keyboard的弹出与消失示例_网络技术

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

发布时间 - 2026-01-11 02:16:48 点击率：次

在开发中经常遇到需要输入的地方，所以就学习了一下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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# react # native弹出键盘 # native # 弹出 # ReactJs实现树形结构的数据显示的组件的示例 # 详解React中传入组件的props改变时更新组件的几种实现方法 # VSCode配置react开发环境的步骤 # react-redux中connect的装饰器用法@connect详解 # ReactNative 之FlatList使用及踩坑封装总结 # react-router browserHistory刷新页面404问题解决方法 # 详解React Native开源时间日期选择器组件(react-native-datetime) # React Fiber结构的创建步骤 # 有个 # 可以找到 # 大家多多 # 留个 # Demo # TextInput # brush # import # class # pre # js # extends # _keyboardDidShow # keyboardDidHideListener # keyboardDidHide # keyboardDidShow # componentWillMount # keyboardDidShowListener # addListener

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：搜狗浏览器如何安装第三方crx插件搜狗浏览器离线安装Chr

下一篇：app开发报价单如何制定？费用包含哪些项？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：搜狗浏览器如何安装第三方crx插件搜狗浏览器离线安装Chr

下一篇：app开发报价单如何制定？费用包含哪些项？