React Native如何将secureTextEntry=true时的圆圈替换为星号

当给TextInput设置secureTextEntry={true}时，输入的密码会显示成圆圈，我想改成显示星号，下面是可行的实现方法：

自定义密码输入组件 #

原生的密码显示样式是系统默认的，没法直接修改，所以我们可以自己实现一个密码输入组件，维护真实密码的同时，输入框里只显示星号：

import React, { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';

const PasswordInput = ({ style, onPasswordChange, ...props }) => {
  const [password, setPassword] = useState('');
  const [showStars, setShowStars] = useState('');

  const handleInputChange = (text) => {
    setPassword(text);
    // 根据输入长度生成对应数量的星号
    setShowStars('*'.repeat(text.length));
    // 如果需要外部获取密码，通过回调传递
    if (onPasswordChange) {
      onPasswordChange(text);
    }
  };

  return (
    <TextInput
      {...props}
      style={[styles.defaultInput, style]}
      value={showStars}
      onChangeText={handleInputChange}
      // 关闭原生的密码隐藏逻辑
      secureTextEntry={false}
    />
  );
};

const styles = StyleSheet.create({
  defaultInput: {
    borderWidth: 1,
    borderColor: '#e0e0e0',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 6,
  },
});

export default PasswordInput;

怎么用 #

在需要密码输入的地方直接用这个组件就行，还能通过onPasswordChange拿到真实的密码值：

import PasswordInput from './PasswordInput';

// 比如在登录页面
const LoginScreen = () => {
  const [userPassword, setUserPassword] = useState('');

  return (
    // ...其他组件
    <PasswordInput
      placeholder="请输入密码"
      onPasswordChange={setUserPassword}
    />
    // ...
  );
};

补充说明 #

• 这个组件支持正常的输入、删除操作，星号长度会自动跟着输入内容变化。
• 如果需要支持密码可见/隐藏的切换，只需要加个状态控制显示真实密码还是星号就行，比如搭配一个眼睛图标点击切换。

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