欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ReactNative之鍵盤Keyboard的彈出與消失示例

 更新時間：2017年07月11日 09:31:14   作者：coder_小刀  
本篇文章主要介紹了ReactNative之鍵盤Keyboard的彈出與消失示例，具有一定的參考價值，有興趣的可以了解一下

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

今天我們來說下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 ( 
   <TextInput 
    onSubmitEditing={Keyboard.dismiss} 
   /> 
  ); 
 } 
}

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

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

相關(guān)文章

  • create-react-app開發(fā)常用配置教程

    create-react-app開發(fā)常用配置教程

    這篇文章主要為大家介紹了create-react-app開發(fā)常用配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-06-06
  • 利用ES6語法重構(gòu)React組件詳解

    利用ES6語法重構(gòu)React組件詳解

    這篇文章主要介紹了利用ES6語法重構(gòu)React組件的相關(guān)資料，文中通過示例代碼介紹的很詳細(xì)，對大家具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。
    2017-03-03
  • Electron+React應(yīng)用打包全流程

    Electron+React應(yīng)用打包全流程

    本文主要介紹了Electron+React應(yīng)用打包全流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook

    useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook

    這篇文章主要為大家介紹了useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-07-07
  • 30行代碼實現(xiàn)React雙向綁定hook的示例代碼

    30行代碼實現(xiàn)React雙向綁定hook的示例代碼

    本文主要介紹了30行代碼實現(xiàn)React雙向綁定hook的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • 詳解React 和 Redux的關(guān)系

    詳解React 和 Redux的關(guān)系

    這篇文章主要為大家介紹了React 和 Redux的關(guān)系，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2021-11-11
  • react antd-design Select全選功能實例

    react antd-design Select全選功能實例

    這篇文章主要介紹了react antd-design Select全選功能實例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 詳解React中的不可變值

    詳解React中的不可變值

    這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react.js，感興趣的朋友可以了解下
    2021-04-04
  • 快速創(chuàng)建React項目并配置webpack

    快速創(chuàng)建React項目并配置webpack

    這篇文章主要介紹了創(chuàng)建React項目并配置webpack,在這里需要注意，Create?React?App?requires?Node?14?or?higher.需要安裝高版本的node，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧
    2022-01-01
  • React項目build打包頁面空白的解決方案

    React項目build打包頁面空白的解決方案

    React項目執(zhí)行build命令后,在本地服務(wù)器打開頁面是空白的,本文主要介紹了React項目build打包頁面空白的解決方案,感興趣的可以了解一下
    2023-08-08

最新評論