ReactNative之鍵盤Keyboard的彈出與消失示例
在開發(fā)中經(jīng)常遇到需要輸入的地方,所以就學習了一下ReactNative鍵盤Keyboard的彈出與消失的方法,留個筆記。
今天我們來說下RN對鍵盤事件的支持。
在React-native 的Component組件中有個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)聽的事件是否都ok。
踩坑如下:
android 對keyboardWillShow 監(jiān)聽不到。
同樣,我們在源碼里可以找到使鍵盤消失的函數(shù)
/**
* Dismisses the active keyboard and removes focus.
*/
dismiss () {
dismissKeyboard();
}
我們?nèi)绻枰褂脮r,可以如下:
const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard();
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- ReactJs實現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù)顯示的組件的示例
- 詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法
- VSCode配置react開發(fā)環(huán)境的步驟
- react-redux中connect的裝飾器用法@connect詳解
- ReactNative 之FlatList使用及踩坑封裝總結(jié)
- react-router browserHistory刷新頁面404問題解決方法
- 詳解React Native開源時間日期選擇器組件(react-native-datetime)
- React Fiber結(jié)構(gòu)的創(chuàng)建步驟
相關(guān)文章
React實現(xiàn)一個支持動態(tài)插槽的Layout組件
這篇文章主要為大家詳細介紹了如何使用React實現(xiàn)一個支持動態(tài)注冊內(nèi)容的插槽組件,文中的示例代碼簡潔易懂,有需要的小伙伴可以了解一下2025-02-02
ahooks useVirtualList 封裝虛擬滾動列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動列表詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09
詳解webpack + react + react-router 如何實現(xiàn)懶加載
這篇文章主要介紹了詳解webpack + react + react-router 如何實現(xiàn)懶加載,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-11-11

