当secureTextEntry为true时，TextInput清除文本。

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 }) }} />

点击眼睛按钮可以切换输入框的显示方式

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

请帮忙。

- Vishu Bhardwaj

---

同样的问题，你解决了吗？ - David

@David，不，我还没有找到可行的选项。 - Vishu Bhardwaj

Answer 1

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

- Osiel Lima

---

不幸的是，Osiel Lima 是正确的，这确实是 iOS 的预期行为。在我看来，这是非常糟糕设计的行为，但它似乎在 iOS 上的各种应用程序中都相当一致。 - TheRealMikeD

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 }) }} />

- Ammar Tariq