Question

您好，我正在使用React Native的TextInput，并且有一个眼睛选项可以查看或隐藏密码。当我将secureTextEntry设置为true并在输入中键入另一个字符时，它将清除所有先前的数据，而只是键入该字符。

这是我的代码：

<TextInput
 ref={ref => this._password = ref}
 style={[style.greyTextStyle, style.textinputStyle]}
 placeholder={strings.PASSWORD}
 secureTextEntry={this.state.securepass}
 placeholderTextColor={color.GREY_TEXT_COLOR}
 underlineColorAndroid='transparent'
 value={this.state.password}
 onChangeText={(text) => { this.setState({ password: text }) }} />

点击btn时，我会切换安全文本输入

showPassword() {
 this.setState({ securepass: !this.state.securepass });
 if (this.state.securepass == false) {
  this.setState({ passIcon: 'eye' })
 } else {
  this.setState({ passIcon: 'eye-off' })
 }
}

请帮助。

Answer 1

我认为这是iOS的本机行为。请检查此https://github.com/facebook/react-native/issues/9148和此https://github.com/facebook/react-native/issues/12939。您可以在切换显示/隐藏密码之前尝试保存该值，然后再设置。

Answer 2

在textInput中将属性clearTextOnFocus设置为false可能会帮助

<TextInput
 clearTextOnFocus={false}
 ref={ref => this._password = ref}
 style={[style.greyTextStyle, style.textinputStyle]}
 placeholder={strings.PASSWORD}
 secureTextEntry={this.state.securepass}
 placeholderTextColor={color.GREY_TEXT_COLOR}
 underlineColorAndroid='transparent'
 value={this.state.password}
 onChangeText={(text) => { this.setState({ password: text }) }} />

当secureTextEntry为true时，TextInput清除文本

2 个答案: