React Native中TextInput密码显示按钮不生效问题咨询

问题根源 #

你定义的passwordHidden是普通JavaScript变量，React组件不会追踪这类变量的变化。就算你在showPassword里把它改成false，组件也不会重新渲染，secureTextEntry始终读取初始的true，所以密码一直处于隐藏状态。

修复步骤 #

React组件要响应变量变化并更新UI，必须使用状态变量，这里用useState钩子就能解决：

1. 首先从react导入useState：

import { useState } from 'react';

2. 把普通变量替换为状态变量：
   将let passwordHidden = true改成：

const [passwordHidden, setPasswordHidden] = useState(true);

3. 修改showPassword函数，用状态更新函数来切换显示状态（做成切换逻辑，点击可来回切换显示/隐藏）：

function showPassword() {
  setPasswordHidden(prev => !prev);
}

4. 注意{...props}的位置：如果你的props里包含secureTextEntry，它会覆盖你手动设置的secureTextEntry={passwordHidden}，建议提前解构排除这个属性：

const { secureTextEntry, ...restProps } = props;

修改后的完整代码 #

import { useState } from 'react';
import { View, TouchableOpacity, TextInput as ReactTextInput } from 'react-native';
// 导入你的FormComponentMargin、Icon等组件

export function TextInput(props: Props) {
  const [passwordHidden, setPasswordHidden] = useState(true);

  function showPassword() {
    setPasswordHidden(prev => !prev);
  }

  // 避免props覆盖secureTextEntry属性
  const { secureTextEntry, ...restProps } = props;

  return (
    <View style={{marginBottom: props.marginBottomProp}}>
      <FormComponentMargin>
        <View style={styles.container}>
          <View style={{width: 48, alignItems: 'center'}}>
            <Icon
              name={props.icon}
              type={props.iconType ?? "font-awesome"}/>
          </View>
          <ReactTextInput
            style={{...styles.textInput}}
            placeholderTextColor={placeholderTextColor}
            secureTextEntry={passwordHidden}
            {...restProps}
          />

          <TouchableOpacity onPress={showPassword}>
            <View
              style={{width: 48, alignItems: 'center', position: 'absolute', right: 0, bottom: 0}}>
              <Icon
                name={passwordHidden ? "eye" : "eye-slash"} // 根据状态切换图标，更直观
                type={props.iconType ?? "font-awesome"}
                color={tintColor}
                size={20}
              />
            </View>
          </TouchableOpacity>
        </View>
      </FormComponentMargin>
    </View>
  )
}

额外优化：根据passwordHidden的值切换图标（显示眼睛/斜杠眼睛），让用户能直观看到当前密码的显示状态。

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