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 代码共享最佳实践方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-05-05
  • 利用ES6语法重构React组件详解

    利用ES6语法重构React组件详解

    这篇文章主要介绍了利用ES6语法重构React组件的相关资料,文中通过示例代码介绍的很详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • React实现一个支持动态插槽的Layout组件

    React实现一个支持动态插槽的Layout组件

    这篇文章主要为大家详细介绍了如何使用React实现一个支持动态注册内容的插槽组件,文中的示例代码简洁易懂,有需要的小伙伴可以了解一下
    2025-02-02
  • react diff 算法实现思路及原理解析

    react diff 算法实现思路及原理解析

    这篇文章主要介绍了react diff 算法实现思路及原理解析,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有我们常见的 key 的作用,需要的朋友可以参考下
    2022-05-05
  • react系列从零开始_简单谈谈react

    react系列从零开始_简单谈谈react

    下面小编就为大家带来一篇react系列从零开始_简单谈谈react。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • React 远程动态组件实践示例详解

    React 远程动态组件实践示例详解

    这篇文章主要为大家介绍了React 远程动态组件实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • ahooks useVirtualList 封装虚拟滚动列表

    ahooks useVirtualList 封装虚拟滚动列表

    这篇文章主要为大家介绍了ahooks useVirtualList 封装虚拟滚动列表详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 详解webpack + react + react-router 如何实现懒加载

    详解webpack + react + react-router 如何实现懒加载

    这篇文章主要介绍了详解webpack + react + react-router 如何实现懒加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-11-11
  • React错误边界Error Boundaries详解

    React错误边界Error Boundaries详解

    错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树
    2022-12-12
  • react-router4按需加载(踩坑填坑)

    react-router4按需加载(踩坑填坑)

    这篇文章主要介绍了react-router4按需加载(踩坑填坑),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论