ネイティブに反応して、キーボードの上のTextInputを設定する方法

ジョナス：

私は、フォームを処理していますアプリに取り組んでいますが、私はをクリックしたとき、私は実際にいくつかの深刻な問題を抱えている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;
`;

mleister：

あなたは、いわゆる内のすべてのテキストフィールドを使用して、親コンテナをラップしてみてください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'
    }
});