react native 键盘事件

在做修改密码功能是发现他的键盘第一次调起之后然后收起键盘焦点不会消失而且键盘也不会再调起来了

我门线引入需要的组件

import {

StyleSheet,

View,

TextInput,

Keyboard,

TouchableWithoutFeedback,

} from 'react-native';
import React, {useEffect, useState, useRef} from 'react';

    <TouchableWithoutFeedbackonPress={() => {closeKeyboard();}}><View style={[globalStyles.wrapPadding, styles.forget]}><View style={[globalStyles.jdCardListWrap, styles.card]}><ListItem bottomDivider containerStyle={[styles.list]}><ListItem.Content><ListItem.Title>旧密码</ListItem.Title></ListItem.Content><TextInputmaxLength={12}ref={textInputOld}onSubmitEditing={Keyboard.dismiss}style={styles.input}// 是否显示密码secureTextEntry={isPassword}// 键盘绑定的值value={oldPwd}onChangeText={t => {setOldPwd(t);}}placeholder="请输入密码"></TextInput></ListItem></View><Buttontitle="提交"color="primary"size="lg"containerStyle={[styles.button]}onPress={() => {ruleFormData();}}/></View></TouchableWithoutFeedback>

获取输入框

const textInputOld = useRef(null);

// 键盘是否关闭

const [keyboardIsShow, setKeyboardIsShow] = useState<boolean>(false);

然后再 useEffect 中

// 这里取监听键盘事件
useEffect(() => {// 监听键盘收起事件const hideSubscription = Keyboard.addListener('keyboardDidHide', ():void => {setKeyboardIsShow(false);// 键盘关闭 让输入框失去焦点textInputOld.current.blur();});const showSubscription = Keyboard.addListener('keyboardDidShow', ():void => {setKeyboardIsShow(true);});return () => {// 销毁键盘事件hideSubscription.remove();showSubscription.remove();};}, []);

点击空白地方取消键盘，我们再最外层加上该组件