如何在 React Native 中设置键盘上方的 TextInput答案

【问题标题】：How to set TextInput above of the keyboard in React Native如何在 React Native 中设置键盘上方的 TextInput
【发布时间】：2020-06-09 09:47:34
【问题描述】：

我正在开发一个正在处理表单的应用程序，但实际上当我点击 TextInput 然后 textinput 消失时我遇到了一些严重的问题。我想在键盘上方设置 TextInput 。谢谢

代码

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;
`;

【问题讨论】：

所以当keyboard appears 对吗？
@grecdev 是的，正确的。当我点击输入字段时，我想出现输入并希望在输入下方显示键盘
尝试在FieldContainer 上添加overflow-y: scroll 吗？检查它是否有效。
@grecdev 我收到错误：overflow-y 不是有效的样式属性
检查this

标签： javascript reactjs react-native ecmascript-6

【解决方案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'
    }
});

【讨论】：