如何在React Native中将TextInput设置在键盘之上

Question

我正在开发一款应用程序，处理一个表单时遇到了一些严重的问题。实际上，当我点击时，TextInput会消失。我想将TextInput设置在键盘之上。 谢谢。 < p >

代码

import React from "react";
import styled from "styled-components";
import { Platform } from "react-native";

const Fields = ({ placeholderData }) => {
  return (
    <FieldContainer>
      <TextField
        placeholder={placeholderData}
        placeholderTextColor="#0b4975"
        secureTextEntry={
          placeholderData === "Password" ||
          placeholderData === "Confirm Password"
            ? true
            : false
        }
      />
    </FieldContainer>
  );
};

export default Fields;

const FieldContainer = styled.View`
  width: 300px;
  margin-top: 20px;
`;

const TextField = styled.TextInput`
  border: 1px solid #0b4975;
  border-radius: 50px;
  padding: ${Platform.OS === "ios" ? "15px" : "8px"};
  margin-left: 20px;
  padding-left: 30px;
`;

- Jonas

---

所以你想让所有的“输入字段”在“键盘出现”时都可见，对吧？ - user11910832

@grecdev 我遇到了错误：overflow-y 不是有效的样式属性。 - Jonas

请查看这个链接。 - user11910832

@grecdev 我试过了，但没有找到合适的解决方案。 - Jonas

你应该尝试将你的 textfield 放在 ScrollView 中。 - shammi

Answer 1

你可以尝试使用所谓的KeyboardAvoidingView将包含所有文本字段的父容器包裹起来。

这是一个例子：

import {StyleSheet, KeyboardAvoidingView } from 'react-native';

<KeyboardAvoidingView behavior='padding' keyboardVerticalOffset={50} style={styles.screen}>
     // Add all your FieldContainers here
</KeyboardAvoidingView>

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

- mleister