我在显示或隐藏密码值时遇到 TextInput 光标问题,当用户触摸显示密码按钮时,光标移动到 Android 的开头,iOS 正常工作。
这是揭示密码的功能:
displayPass(){
this.setState({
hiddenPass: !this.state.hiddenPass
});
}
这是文本输入
<TextInput onChangeText = {(pass) => this.setState({pass})}
secureTextEntry = {this.state.hiddenPass} />
这是按钮:
<TouchableOpacity onPress = {this.displayPass.bind(this)}>
<Text style = {styles.textReveal}>{this.state.hiddenPass ? "Reveal Password" : "Hide Password"}</Text>
</TouchableOpacity>
最佳答案
DISCLAIMER: For me, it was impossible to fix this under Expo 32. Playing with cursor position, focus/blur and
setNativeProps
did not solve it.
如果您需要具有隐藏和显示功能的密码输入,您最好的选择是:
添加
react-native-hide-show-password-input
包:https://www.npmjs.com/package/react-native-hide-show-password-input将 expo 更新到版本 33。您可以按照以下说明操作:https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c (您会找到要更新的依赖项的确切列表及其兼容版本)。 升级后不需要额外的逻辑,直接使用
TextInput
组件即可。单击“显示/隐藏密码”图标后,您会看到光标停留在正确的位置。
关于android - TextInput 光标移动到显示/隐藏密码的开头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48893034/