无法将圆圈转换为星号 (*)

Question

这是我的密码视图。

 <LinearGradient
         colors={focused2?['#FF53C0', '#FF53C000', '#FF53C000']:['#60FFCA', '#60FFCA00', '#60FFCA00']}
        start={{x: 0.6, y: 0}}
        end={{x: 1, y: 0.8}}
        style={styles.PasswordLinearGradient}>
        <View style={styles.PasswordView}>
          <Image
            source={focused2?require('../assets/images/Password_Pink.png'):require('../assets/images/PasswordIcon.png')}
            style={styles.PasswordLogo}></Image>
          <TextInput
            placeholder="Password"
            ref={ref_input1}
            onFocus={handleFocus2}
            onBlur={handleBlur2}  
           onChangeText={text=>setPassword(text)}
            //secureTextEntry={!showPassword}
            value={!showPassword?password:'*'.repeat(password.length)} // This is important.
            placeholderTextColor={'rgba(200, 200, 200, 1)'}
            style={styles.EmailTextInput}></TextInput>
          {focused2==true?
          <TouchableOpacity onPress={()=>togglePassword()}>
              <Image
                source={!showPassword?require('../assets/images/Show_Password_Pink.png'):require('../assets/images/Hide_Password_Pink.png')}
                style={styles.HidePasswordLogo}></Image>
          </TouchableOpacity>
          :
          <TouchableOpacity onPress={()=>togglePassword()}>
              <Image
                source={!showPassword?require('../assets/images/Show_Password.png'):require('../assets/images/Hide_Password.png')}
                style={styles.HidePasswordLogo}></Image>
          </TouchableOpacity>
          }
        </View>
      </LinearGradient>

我希望当我单击隐藏按钮时显示星号，然后单击显示密码以显示字符。 当我的按钮隐藏时，我卡住了，我写了一些字符，然后显示看不清。

Answer 1

这是使用 secureTextEntry 的最小示例。

const [password, setPassword] = React.useState('');
const [secure, setSecure] = React.useState(true);

<TextInput
  value={password}
  onChangeText={setPassword}
  secureTextEntry={secure}
/>
<Pressable onPress={() => setSecure((value) => !value)}>
  <Text>{secure ? 'Show' : 'Hide'}</Text>
</Pressable>