ReactNative之鍵盤Keyboard的彈出與消失示例
更新時(shí)間：2017年07月11日 09:31:14 作者：coder_小刀
本篇文章主要介紹了ReactNative之鍵盤Keyboard的彈出與消失示例，具有一定的參考價(jià)值，有興趣的可以了解一下
在開發(fā)中經(jīng)常遇到需要輸入的地方，所以就學(xué)習(xí)了一下ReactNative鍵盤Keyboard的彈出與消失的方法，留個(gè)筆記。
今天我們來說下RN對(duì)鍵盤事件的支持。
在React-native 的Component組件中有個(gè)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`
使用的時(shí)候需要測(cè)試下Android和iOS下監(jiān)聽的事件是否都o(jì)k。
踩坑如下：
android 對(duì)keyboardWillShow 監(jiān)聽不到。
同樣，我們?cè)谠创a里可以找到使鍵盤消失的函數(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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- ReactJs實(shí)現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù)顯示的組件的示例
- 詳解React中傳入組件的props改變時(shí)更新組件的幾種實(shí)現(xiàn)方法
- VSCode配置react開發(fā)環(huán)境的步驟
- react-redux中connect的裝飾器用法@connect詳解
- ReactNative 之FlatList使用及踩坑封裝總結(jié)
- react-router browserHistory刷新頁面404問題解決方法
- 詳解React Native開源時(shí)間日期選擇器組件(react-native-datetime)
- React Fiber結(jié)構(gòu)的創(chuàng)建步驟
相關(guān)文章
這篇文章主要為大家介紹了create-react-app開發(fā)常用配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了利用ES6語法重構(gòu)React組件的相關(guān)資料，文中通過示例代碼介紹的很詳細(xì)，對(duì)大家具有一定的參考借鑒價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
本文主要介紹了Electron+React應(yīng)用打包全流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook
這篇文章主要為大家介紹了useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼
本文主要介紹了30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家介紹了React 和 Redux的關(guān)系，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
react antd-design Select全選功能實(shí)例
這篇文章主要介紹了react antd-design Select全選功能實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react.js，感興趣的朋友可以了解下2021-04-04
快速創(chuàng)建React項(xiàng)目并配置webpack
這篇文章主要介紹了創(chuàng)建React項(xiàng)目并配置webpack,在這里需要注意，Create?React?App?requires?Node?14?or?higher.需要安裝高版本的node，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-01-01
React項(xiàng)目build打包頁面空白的解決方案
React項(xiàng)目執(zhí)行build命令后,在本地服務(wù)器打開頁面是空白的,本文主要介紹了React項(xiàng)目build打包頁面空白的解決方案,感興趣的可以了解一下2023-08-08