reactjs - 如何在 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]

**

标签： reactjsreact-nativereact-native-androidnativenative-base

Answer 1

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