這篇文章主要介紹了ReactNative之鍵盤Keyboard彈出與消失的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比蒙陰網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式蒙陰網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋蒙陰地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

RN對鍵盤事件的支持。

在React-native 的Component組件中有個Keyboard.

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

我們先來看下官方提供的例子，監(jiā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 ( 
    
  ); 
 } 
}

Keyboard支持的監(jiān)聽事件如下：

@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下監(jiān)聽的事件是否都o(jì)k。

踩坑如下：

android 對keyboardWillShow 監(jiān)聽不到。

同樣，我們在源碼里可以找到使鍵盤消失的函數(shù)

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ReactNative之鍵盤Keyboard彈出與消失的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!