ReactNative之鍵盤(pán)Keyboard的彈出與消失示例

更新時(shí)間：2017年07月11日 09:31:14 作者：coder_小刀

本篇文章主要介紹了ReactNative之鍵盤(pán)Keyboard的彈出與消失示例，具有一定的參考價(jià)值，有興趣的可以了解一下

在開(kāi)發(fā)中經(jīng)常遇到需要輸入的地方，所以就學(xué)習(xí)了一下ReactNative鍵盤(pán)Keyboard的彈出與消失的方法，留個(gè)筆記。

今天我們來(lái)說(shuō)下RN對(duì)鍵盤(pán)事件的支持。

在React-native 的Component組件中有個(gè)Keyboard.

github地址如下：https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard

我們先來(lái)看下官方提供的例子，監(jiān)聽(tīng)鍵盤(pán)的彈出與消失。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支持的監(jiān)聽(tīng)事件如下：

@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`

使用的時(shí)候需要測(cè)試下Android和iOS下監(jiān)聽(tīng)的事件是否都o(jì)k。

踩坑如下：

android 對(duì)keyboardWillShow 監(jiān)聽(tīng)不到。

同樣，我們?cè)谠创a里可以找到使鍵盤(pán)消失的函數(shù)

/** 
 * Dismisses the active keyboard and removes focus. 
 */ 
dismiss () { 
 dismissKeyboard(); 
}

我們?nèi)绻枰褂脮r(shí)，可以如下：

const dismissKeyboard = require('dismissKeyboard'); 
dismissKeyboard();

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解React 代碼共享最佳實(shí)踐方式
這篇文章主要介紹了React 代碼共享最佳實(shí)踐方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-05-05
利用ES6語(yǔ)法重構(gòu)React組件詳解
這篇文章主要介紹了利用ES6語(yǔ)法重構(gòu)React組件的相關(guān)資料，文中通過(guò)示例代碼介紹的很詳細(xì)，對(duì)大家具有一定的參考借鑒價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
React實(shí)現(xiàn)一個(gè)支持動(dòng)態(tài)插槽的Layout組件
這篇文章主要為大家詳細(xì)介紹了如何使用React實(shí)現(xiàn)一個(gè)支持動(dòng)態(tài)注冊(cè)內(nèi)容的插槽組件,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以了解一下
2025-02-02
react?diff?算法實(shí)現(xiàn)思路及原理解析
這篇文章主要介紹了react?diff?算法實(shí)現(xiàn)思路及原理解析,本節(jié)我們正式進(jìn)入基本面試必考的核心地帶?--?diff?算法，了解如何優(yōu)化和復(fù)用?dom?操作的，還有我們常見(jiàn)的?key?的作用,需要的朋友可以參考下
2022-05-05
react系列從零開(kāi)始_簡(jiǎn)單談?wù)剅eact
下面小編就為大家?guī)?lái)一篇react系列從零開(kāi)始_簡(jiǎn)單談?wù)剅eact。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
React 遠(yuǎn)程動(dòng)態(tài)組件實(shí)踐示例詳解
這篇文章主要為大家介紹了React 遠(yuǎn)程動(dòng)態(tài)組件實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
ahooks useVirtualList 封裝虛擬滾動(dòng)列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動(dòng)列表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
詳解webpack + react + react-router 如何實(shí)現(xiàn)懶加載
這篇文章主要介紹了詳解webpack + react + react-router 如何實(shí)現(xiàn)懶加載,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-11-11
React錯(cuò)誤邊界Error Boundaries詳解
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹(shù)任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹(shù)
2022-12-12
react-router4按需加載(踩坑填坑)
這篇文章主要介紹了react-router4按需加載(踩坑填坑)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01