Question

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

我现在遇到的问题是，一切看起来都很不错，但是当您按下其中一个输入时，键盘将覆盖大部分输入。我做了一些研究，并尝试同时使用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不能解决较小屏幕的问题。

希望这会有所帮助！

键盘输入的文本输入（本机语言）

1 个答案: