Как добиться React Native Password Show Hide без побочного эффекта

Question

Я хочу создать поле пароля, которое:

• показывает / скрывает пароль, и 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

Вы можете использовать secureTextEntry проп.

React Native Doc

Answer 2

Я думаю, что вы можете снова автоматически сфокусироваться на вводе пароля, используя опору "ref".

Добавьте опорную ссылку в ваш TextInput:

  <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 () после обновления состояния.