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

Question

显示或隐藏密码值时，TextInput光标出现问题，当用户触摸显示密码按钮时，光标移动到Android的开头，iOS可以正常工作。

这是显示密码的功能：

displayPass(){
    this.setState({
        hiddenPass: !this.state.hiddenPass
    });
}

这是TextInput

<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

免责声明：对我来说，在 Expo 32 下不可能解决这个问题。玩弄光标位置、焦点/模糊并setNativeProps没有解决它。

如果您需要具有隐藏和显示功能的密码输入，您最好的选择是：

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