Текстовые вводы покрыты клавиатурой (React-Native)

Question

Я пытаюсь создать новое простое приложение. Во время этого процесса я решил начать со страницы входа и страницы регистрации. Эти страницы имеют одинаковый стиль, где верхняя треть экрана представляет собой контейнер с lo go, а нижние две трети - это форма с полями ввода.

Проблема в том, что я сейчас застряло то, что все выглядит отлично, но когда вы нажимаете один из входов, клавиатура покрывает большинство входов. Я провел небольшое исследование и попытался применить ScrollView и KeyboardAvoidingView, но ни один из них не работает должным образом.

Вот как настроена моя страница:

<View style={styles.screen}>
  {this.state.loading && (
    <View style={styles.loading}>
      <ActivityIndicator
        color={primaryColor}
        size="large"
      />
    </View>
  )}
  <View style={styles.logoContainer}>
    <Image source={require('../../../assets/logo.png')} style={styles.logo} />
  </View>
  <View style={styles.formContainer}>
    <KeyboardAvoidingView
      behavior={'padding'}
      enabled
      style={styles.form}
    >
      <FloatingLabelInput
        blurOnSubmit={false}
        editable={true}
        keyboardType={'email-address'}
        label="Email"
        onChangeText={this.handleEmailChange}
        onSubmitEditing={() => this.passwordInput && this.passwordInput.focus()}
        ref={(input) => { this.emailInput = input; }}
        returnKeyType="next"
        value={this.state.email}
      />
      <FloatingLabelInput
        editable={true}
        label="Password"
        onChangeText={this.handlePasswordChange}
        onSubmitEditing={() => this.signup()}
        ref={(input) => { this.passwordInput = input; }}
        secureTextEntry={true}
        value={this.state.password}
      />
    </KeyboardAvoidingView>
    <View style={styles.buttonContainer}>
      <Button buttonFunction={() => this.signup()} buttonStyle={'primary'} buttonText={'Sign Up'} />
    </View>
  </View>
</View>

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

Answer 1

Я добавил компонент Content в ваш код, который решает вашу проблему. Я не знаю, почему проблема исчезла, удалив KeyboardAvoidingView, но если вы хотите использовать KeyboardAvoidingView, вы можете сделать это следующим образом.

<View style={styles.container}>
          <Content>
              <View style={{ alignItems: "center", marginTop: "50%" }}>
                  <Image source={require('../assets/CustomLogo1.png')} style={{ marginLeft: 10, marginBottom: 20, height: 200, width: 200 }} />
              </View>
              <View>
                  <KeyboardAvoidingView behavior={Platform.Os == "ios" ? "padding" : "height"}>
                      <FloatingLabelInput
                          blurOnSubmit={false}
                          editable={true}
                          keyboardType={'email-address'}
                          label="Email"
                          onChangeText={this.handleEmailChange}
                          onSubmitEditing={() => this.passwordInput && this.passwordInput.focus()}
                          ref={(input) => { this.emailInput = input; }}
                          returnKeyType="next"
                          value="sample mail"
                      />
                      <FloatingLabelInput
                          editable={true}
                          label="Password"
                          onChangeText={this.handlePasswordChange}
                          onSubmitEditing={() => this.signup()}
                          ref={(input) => { this.passwordInput = input; }}
                          secureTextEntry={true}
                          value="password"
                      />
                  </KeyboardAvoidingView>
                  <View style={{ marginTop: 20 }}>
                      <Button buttonFunction={() => this.signup()} title="sign up" />
                  </View>
              </View>
          </Content>
      </View>

Начальная страница входа в систему, когда возникает проблема с фокусировкой пароля:

После внесения необходимых изменений это будет выглядеть так:

Просто добавьте компонент содержимого, который можно импортировать из собственной базы после компонента View. Я думаю, что удаление KeyBoardAvoidingView не решит проблему для небольших экранов.

Надеюсь, это поможет!