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

哈姆扎阿扎姆

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

这是代码：

[![<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]

拉斯·玛吉内

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。