android - TextInput 光标移动到显示/隐藏密码的开头

Question

我在显示或隐藏密码值时遇到 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>    

Answer 1

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组件即可。单击“显示/隐藏密码”图标后，您会看到光标停留在正确的位置。