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

 更新时间:2017年07月11日 09:31:14   作者:coder_小刀  
本篇文章主要介绍了ReactNative之键盘Keyboard的弹出与消失示例,具有一定的参考价值,有兴趣的可以了解一下

在开发中经常遇到需要输入的地方,所以就学习了一下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如何利用相对于根目录进行引用组件详解

    React如何利用相对于根目录进行引用组件详解

    这篇文章主要给大家介绍了关于React如何使用相对于根目录进行引用组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 简谈创建React Component的几种方式

    简谈创建React Component的几种方式

    这篇文章主要介绍了创建React Component的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • 详解React 父组件和子组件的数据传输

    详解React 父组件和子组件的数据传输

    这篇文章主要介绍了React 父组件和子组件的数据传输的相关资料,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • React中使用外部样式的3种方式(小结)

    React中使用外部样式的3种方式(小结)

    这篇文章主要介绍了React中使用外部样式的3种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 详解React中的不可变值

    详解React中的不可变值

    这篇文章主要介绍了React中的不可变值的相关资料,帮助大家更好的理解和学习使用react.js,感兴趣的朋友可以了解下
    2021-04-04
  • react中的ajax封装实例详解

    react中的ajax封装实例详解

    这篇文章主要介绍了react中的ajax封装实例详解的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下
    2017-10-10
  • 在react项目中使用antd的form组件,动态设置input框的值

    在react项目中使用antd的form组件,动态设置input框的值

    这篇文章主要介绍了在react项目中使用antd的form组件,动态设置input框的值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • ES6下React组件的写法示例代码

    ES6下React组件的写法示例代码

    这篇文章主要给大家介绍了在ES6下React组件的写法,其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定,文中分别给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • React中10种Hook的使用介绍

    React中10种Hook的使用介绍

    Hook 是 React 16.8 的新增特性,本文主要介绍了10种Hook的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 详解关于React-Router4.0跳转不置顶解决方案

    详解关于React-Router4.0跳转不置顶解决方案

    这篇文章主要介绍了详解关于React-Router4.0跳转不置顶解决案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05

最新评论