如何在 React Native 中设置键盘上方的 TextInput 字段

Question

在图片中您可以看到，当我在输入字段上按下时，键盘覆盖了大部分输入字段，用户看不到其余的输入字段。我想要一些东西，当用户点击输入字段时，它会轻微显示字段和键盘。

代码如下：

**

[![<Container style={styles.background}>
      <Content>
        <View style={styles.placeholderstyle}>
          <Item>
            <Input
              placeholder="Email"
              placeholderTextColor={'rgb(243, 243, 244)'}
              onChangeText={(text) => setEmail(text)}
              value={email}
              style={styles.inputstyle}
            />
          </Item>
          <Item>
            <Input
              placeholder="User Name"
              placeholderTextColor={'rgb(243, 243, 244)'}
              onChangeText={(text) => setName(text)}
              value={user_name}
              style={styles.inputstyle}
            />
          </Item>
          <Item>
            <Input
              placeholder="Password"
              secureTextEntry={true}
              placeholderTextColor={'rgb(243, 243, 244)'}
              onChangeText={(text) => setPassword(text)}
              value={password}
              style={styles.inputstyle}
            />
          </Item>
          <Item>
            <Input
              placeholder="Confirm Password"
              secureTextEntry={true}
              placeholderTextColor={'rgb(243, 243, 244)'}
              onChangeText={(text) => setResetPassword(text)}
              value={resetPassword}
              style={styles.inputstyle}
            />
          </Item>
        </View>
        <Button
          style={styles.btnstyle}
          onPress={() => signinUser(user_name, resetPassword, email, password)}>
          <Text style={styles.btntextstyle}>SignUp</Text>
        </Button>
      </Content>
    </Container>][1]][1]

**

Answer 1

您可以使用 KeyboardAvoidingView 来包装您的代码。这是文档：https://reactnative.dev/docs/keyboardavoidingview