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();

感謝你能夠認真閱讀完這篇文章，希望小編分享的“ReactNative之鍵盤Keyboard彈出與消失的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!