Как лучше всего обращаться с клавиатурой в реагирующих нативных формах?Шахта прячется / показывает и отвлекает

Question

Мне кажется, что это очень просто, но по какой-то причине оно просто не работает, как я думаю, должно.

У меня есть небольшая форма с двумя полями (имя пользователя и пароль) и кнопкой входа в систему..

Когда пользователь фокусируется на первом поле, появляется клавиатура, и они могут редактировать этот ввод.

При переходе к следующему полю, если пользователь нажимает клавишу «возврат / следующий» наклавиатура устройства сразу фокусируется на втором входе (что нормально).

Однако, если пользователь просто нажимает на следующее поле ввода, клавиатура закрывается. Я хочу, чтобы он оставался открытым.

Кроме того, когда пользователь закончит заполнять форму, Я хочу, чтобы он мог просто нажать на кнопку «Войти»один раз и отправьте форму ... но прямо сейчас, если вы сделаете это, клавиатура просто исчезнет, ​​и вам придется снова нажать кнопку входа в систему.

Как я могу получить лучший, менее шумныйопыт работы с клавиатурой здесь?

Ниже мой код:

return (
  <ScrollView
    style={styles.container}
    keyboardShouldPersistTaps="always" // I've also tried "handled" here, and also taking this attribute off all together
  >
    <View style={styles.modalHeaderBox}>
      <Text style={styles.modalHeader}>Log In</Text>
    </View>

    <View style={styles.form}>
      <View style={styles.row}>
        <TextInput
          ref="username"
          value={username}
          editable={editable}
          blurOnSubmit={false}
          keyboardType="email-address"
          returnKeyType="next"
          autoCapitalize="none"
          autoCorrect={false}
          underlineColorAndroid="transparent"
          onSubmitEditing={() => this.refs.password.focus()}
          placeholder="Email Address"
        />
      </View>

      <View style={styles.row}>
        <TextInput
          ref="password"
          value={password}
          editable={editable}
          blurOnSubmit={false}
          keyboardType="default"
          returnKeyType="go"
          autoCapitalize="none"
          autoCorrect={false}
          secureTextEntry
          underlineColorAndroid="transparent"
          onSubmitEditing={this.handlePressLogin}
          placeholder="Password"
        />
      </View>

      <View style={[styles.loginRow]}>
        <ButtonCTA
          style={styles.loginButton}
          onPress={this.handlePressLogin}
        >
          Log In
        </ButtonCTA>
      </View>
    </View>

  </ScrollView>
)

Answer 1

Добавьте это к реквизитам входного компонента

blurOnSubmit={false}