react-native - 键盘涵盖的文本输入(React-Native)

Question

我正在尝试创建一个新的简单应用程序。在此过程中，我决定从登录页面和注册页面开始。这些页面具有相同的样式，其中屏幕的顶部三分之一是一个带有 Logo 的容器，底部三分之二是一个带有输入字段的表单。

我现在遇到的问题是一切看起来都很棒，但是当您按下其中一个输入时，键盘会覆盖大部分输入。我做了一些研究，并尝试同时应用 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

我在您的代码中添加了一个内容组件，这解决了您的问题。我不知道为什么删除 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 组件之后添加一个可以从 native 库导入的内容组件即可。我认为删除 KeyBoardAvoidingView 不会解决较小屏幕的问题。

希望这有帮助!