在react native中隐藏和显示带有矢量图标的密码

Question

import React, { useState } from 'react'
import { Text, View, Image, Pressable, TextInput, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
const Signin = ({ navigation }) => {
const [passwordVisibility, setPasswordVisibility] = useState(true);
const [rightIcon, setRightIcon] = useState('eye');
const [password, setPassword] = useState('');

const handlePasswordVisibility = () => {
if (rightIcon === 'eye') {
setRightIcon('eye-off');
setPasswordVisibility(!passwordVisibility);
} else if (rightIcon === 'eye-off') {
setRightIcon('eye');
setPasswordVisibility(!passwordVisibility);
}
};
return (
<View>
<View style={{ marginTop: 20, marginLeft: 10 }}>
<Pressable
onPress={() => navigation.navigate("Home3")}
style={{
width: 50,
height: 50,
backgroundColor: 'white',
borderRadius: 25,
alignItems: 'center',
justifyContent: 'center'
}}
>
<Image
source={require("../img/back.png")}
style={{ width: 40, height: 40 }}
/>
</Pressable>
</View>
<View style={{ marginLeft: 20, marginTop: 10 }}>
<Text style={{ fontSize: 30, fontWeight: '800', color: 'black' }}>Welcome Back</Text>
<Text style={{ marginTop: 5 }}>Welcome Back!! Please Enter Your Detalis</Text>
</View>
<View style={{ marginLeft: 5, marginTop: 20 }}>
<Text style={{ fontSize: 16, color: 'black', marginLeft: 14, fontWeight: '900' }}>Email</Text>
<TextInput
placeholder='Enter Your Email'
style={{
height: 45,
margin: 12,
padding: 10,
backgroundColor: 'white',
borderRadius: 10
}}
//onChangeText={onChangeNumber}
//value={number}
//keyboardType="numeric"
/>
</View>
<View style={{ marginLeft: 5 }}>
<Text style={{ fontSize: 16, color: 'black', marginLeft: 14, fontWeight: '900' }}>Password</Text>
<TextInput
style={{
height: 45,
margin: 12,
padding: 10,
backgroundColor: 'white',
borderRadius: 10
}}
name="password"
placeholder="Enter password"
autoCapitalize="none"
autoCorrect={false}
secureTextEntry={passwordVisibility}
value={password}
enablesReturnKeyAutomatically
onChangeText={text => setPassword(text)}
/>
<TouchableOpacity 
style={{
marginTop:-50,
marginLeft:325,
}}
onPress={handlePasswordVisibility}
>
<Icon name="eye" size={30} color="#0C8A7B"/>
</TouchableOpacity>
</View>
</View >
)
}
export default Signin;

下面是我的代码…

• 我想这样…

• 如果显示密码，则眼睛图标颜色改变或

• 如果密码是隐藏的，那么眼睛图标的颜色也是不同的

• 这样任何人都可以很容易地理解

• 我可以点击眼睛图标不给出任何结果或者如果我可以点击眼睛图标那么密码也不显示广告给出****像这样

• 所以我能做什么…!!

这是我的输出

输入图片描述

是在眼睛图标点击之前看起来像这样

输入图片描述

这是在点击像这样的眼睛图标之后

nothing changes anything

Answer 1

使用state作为图标名称和颜色。像这样:

const [passwordVisibility, setPasswordVisibility] = useState(true);
const [rightIcon, setRightIcon] = useState('eye');
const [rightIconColor, setRightIconColor] = useState('#0C8A7B');
const handlePasswordVisibility = () => {
if (rightIcon === 'eye') {
setRightIcon('eye-slash');
setRightIconColor('#FF0000')
setPasswordVisibility(!passwordVisibility);
} else if (rightIcon === 'eye-slash') {
setRightIcon('eye');
setRightIconColor('#0C8A7B')
setPasswordVisibility(!passwordVisibility);
}
};
<TouchableOpacity 
onPress={handlePasswordVisibility}>
<Icon name={rightIcon} size={30} color={rightIconColor}/>
</TouchableOpacity>

Answer 2

我认为handlePasswordVisibility函数可能有问题。

不使用rightIconstate

<TouchableOpacity 
style={{
marginTop:-50,
marginLeft:325,
}}
onPress={() => setPasswordVisibility(!passwordVisibility)}
>
<Icon name={passwordVisibility ? 'eye-off':'eye'} size={30} color="#0C8A7B"/>
</TouchableOpacity>