[英]Adding an eye icon on the right side of the input field in react native
I am working on a react native project.我正在做一个反应原生项目。 I have a password field on the Login page and I want to add an eye icon on the right end of the input field.
我在登录页面上有一个密码字段,我想在输入字段的右端添加一个眼睛图标。 My code currently looks like this:
我的代码目前如下所示:
<View><TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password'></TextInput></View>
This is a normal input field with a placeholder text.这是一个带有占位符文本的普通输入字段。
Please find the below code:请找到以下代码:
const [password, setPassword] = useState('');
const [isPasswordSecure, setIsPasswordSecure] = useState(true);
<View style={styles.viewPassword}>
<TextInput
secureTextEntry={isPasswordSecure}
style={styles.textInputStyle}
right={
<TextInput.Icon
name={() => <MaterialCommunityIcons name={isPasswordSecure ? "eye-off" : "eye"} size={28} color={COLORS.black} />} // where <Icon /> is any component from vector-icons or anything else
onPress={() => { isPasswordSecure ? setIsPasswordSecure(false) : setIsPasswordSecure(true) }}
/>
}
fontFamily={FONTS.ROBOTO_REGULAR}
fontSize={Theme.FONT_18PX}
selectionColor={COLORS.orange}
underlineColor={COLORS.orange}
label={StringsConstants.Password}
value={password}
onChangeText={text => setPassword(text)}
underlineColorAndroid="transparent"
theme={{ colors: { text: COLORS.black, primary: COLORS.orange, placeholder: COLORS.black } }}
/>
</View>
I hope it will help you!我希望它会帮助你!
you can put it and style it like this你可以像这样放置它并设置它的样式
<View>
<TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password' />
<EyeIconOrImage style={{
position: 'absolute',
right: 20,
}} />
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.