在本机输入字段的右侧添加一个眼睛图标

Question

我正在做一个 React Native 项目。我在登录页面上有一个密码字段，我想在输入字段的右端添加一个眼睛图标。我的代码目前看起来像这样：

  <View><TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password'></TextInput></View>

这是一个带有占位符文本的普通输入字段。

Answer 1

请找到以下代码：

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>

希望对您有所帮助！

Answer 2

你可以像这样放置它并设计它的样式

<View>
<TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password' />
<EyeIconOrImage style={{
position: 'absolute',
right: 20,
}} />
</View>

在本机输入字段的右侧添加一个眼睛图标

Adding an eye icon on the right side of the input field in react native

javascript

reactjs

react-native