当 TextInput 的 secureTextEntry 属性在 React Native 上更改时，是否有任何解决方案来更改键盘？

Question

我正在使用登录屏幕，并且有那个眼睛图标，因此我可以隐藏或显示密码内容。但是当我更新图标的状态时，手机的键盘发生了变化。 有没有办法让键盘在这两种情况下保持相同的方式？

我尝试更改道具keyboardType，但它仍然发生变化。

Answer 1

到目前为止我不知道你是如何实现代码的，但是尝试这样，

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';

const LoginScreen = () => {
  const [password, setPassword] = useState('');
  const [isPasswordVisible, setPasswordVisible] = useState(false);

  const togglePasswordVisibility = () => {
    setPasswordVisible(!isPasswordVisible);
  };

  return (
    <View>
      <TextInput
        secureTextEntry={!isPasswordVisible}
        value={password}
        onChangeText={setPassword}
        placeholder="Password"
      />
      <TouchableOpacity onPress={togglePasswordVisibility}>
         <Image
              source={isPasswordVisible  ? images.eyeOpen : images.eyeClose}
              style={styles.icon}
            />
      </TouchableOpacity>
    </View>
  );
};

export default LoginScreen;

const styles = StyleSheet.create({
  icon: {
    width: 20,
    height: 20,
  },
  });

你必须改变样式才能制作一个完美的文本输入，眼睛图标在右边。