react native 键盘事件

news2024/11/17 15:45:44

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

我门线引入需要的组件

import {

StyleSheet,

View,

TextInput,

Keyboard,

TouchableWithoutFeedback,

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

    <TouchableWithoutFeedback
      onPress={() => {
        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>
            <TextInput
              maxLength={12}
              ref={textInputOld}
              onSubmitEditing={Keyboard.dismiss}
              style={styles.input}
              // 是否显示密码
              secureTextEntry={isPassword}
              // 键盘绑定的值
              value={oldPwd}
              onChangeText={t => {
                setOldPwd(t);
              }}
              placeholder="请输入密码"></TextInput>
          </ListItem>
        </View>

        <Button
          title="提交"
          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();
    };
  }, []);

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