React Native：切换TextInput的secureTextEntry时如何保持键盘不变？

当切换secureTextEntry属性控制密码显隐时，iOS和Android系统会默认重置键盘类型，哪怕显式设置keyboardType也无法阻止，进而导致键盘切换时出现界面移位的问题。以下是几种可行的解决方法：

方法1：自定义密码显隐逻辑（不修改secureTextEntry） #

不直接切换secureTextEntry，而是通过控制输入框的显示文本与真实存储值实现密码显隐：

• 维护两个状态：actualPassword（存储真实密码内容）、showPassword（控制是否显示明文）
• TextInput的value根据showPassword动态赋值：显示明文时用actualPassword，隐藏时用等长掩码字符（如*）
• 固定secureTextEntry={false}，确保键盘类型始终不变

示例代码（React Native）：

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

const PasswordInput = () => {
  const [actualPassword, setActualPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const handleInputChange = (text) => {
    setActualPassword(text);
  };

  // 生成显示用文本：明文或掩码
  const displayValue = showPassword ? actualPassword : '*'.repeat(actualPassword.length);

  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <TextInput
        value={displayValue}
        onChangeText={handleInputChange}
        keyboardType="numeric" // 固定所需键盘类型
        autoCapitalize="none"
        autoCorrect={false}
        style={{ flex: 1, borderWidth: 1, padding: 8 }}
      />
      <TouchableOpacity 
        onPress={() => setShowPassword(!showPassword)}
        style={{ marginLeft: 8 }}
      >
        {/* 放置眼睛图标组件 */}
      </TouchableOpacity>
    </View>
  );
};

export default PasswordInput;

方法2：Android端配置缓解界面移位 #

若仅需解决Android端的界面移位问题，可在AndroidManifest.xml中给对应Activity添加软键盘模式配置：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustPan">
  <!-- 原有配置 -->
</activity>

该配置让界面整体上移而非重新布局，减少移位感，但无法解决键盘类型切换的闪烁问题。

方法3：使用第三方成熟组件 #

很多React Native第三方输入框组件已封装稳定的密码显隐逻辑，不会触发键盘重置，比如：

• react-native-input-password
• react-native-gifted-form
  选择维护活跃的组件可快速解决问题，无需自行实现复杂逻辑。

内容的提问来源于stack exchange，提问作者JGrima