如何实现无副作用的React Native Password Show Hide

Question

我想做一个密码框：

show/hide 密码和 TextInput 不会失去焦点。
键盘类型不会改变
在没有焦点的情况下更改密码框状态时，不会自动对焦。

我的代码如下：

      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          value={text}
          onChangeText={text => this.setState({ text })}
          secureTextEntry={secureTextEntry}
          underlineColorAndroid="transparent"
        />
        <TouchableWithoutFeedback
          onPress={() => (showing ? this.hide() : this.show())}
        >
          <Image source={this.image} />
        </TouchableWithoutFeedback>
      </View>

但这会使我在单击更改图像时失去焦点。那么我怎样才能达到目标呢？

Answer 1

我认为您可以使用 "ref" 属性再次自动对焦密码输入。

在您的 TextInput 中添加 ref 属性：

  <View style={styles.container}>
    <TextInput
      ref={c => {this.passwordTextInput= c}} //add Reference Prop
      style={styles.textInput}
      value={text}
      onChangeText={text => this.setState({ text })}
      secureTextEntry={secureTextEntry}
      underlineColorAndroid="transparent"
    />

然后调用

 this.passwordTextInput.focus();

在更新状态后 this.hide() 和 this.show() 函数中。

Answer 2

您可以使用 secureTextEntry 道具。

React Native Doc

如何实现无副作用的React Native Password Show Hide

How to achieve React Native Password Show Hide without side effect

passwords

textinput

react-native