Реагировать на родной вид, когда он выдвигается вверх и динамически изменяется высота, когда выскакивает клавиатура

Question

Я разрабатываю приложение в React Native, и проблема, с которой я сейчас сталкиваюсь, заключается в том, что когда я пытаюсь набрать текстовое поле, появляется клавиатура, которая динамически выдвигает или увеличивает вид, изменяя высоту других видов. Пожалуйста, проверьте изображение До и После ниже:

Код:

import React, { Component } from 'react';
import t from 'tcomb-form-native'; // 0.6.9
const Form = t.form.Form;

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

  import { RFPercentage, RFValue } from "react-native-responsive-fontsize";


  const styles = StyleSheet.create({
      parentSectionContainer: {
        flex: 1,
        justifyContent: 'space-evenly',
        backgroundColor: '#F1F0F2'
      },
      SignupFormParent: {
        marginTop: 100,
        alignSelf: 'center',
        backgroundColor: '#FFFFFF',
        height: '45%',
        width: '85%',
        borderRadius: 100,
        shadowColor: '#2AC062',
        shadowOpacity: 0.4,
        shadowOffset: { height: 10, width: 0 },
        shadowRadius: 20,
      },
    textMelow: {
        width: RFPercentage(10),
        fontSize: RFPercentage(2),
        fontWeight: "normal",
        color: '#FFFFFF',
        textTransform: 'uppercase',
        fontStyle: 'normal'
    },
    textBold: {
        width: RFPercentage(10),
        fontSize: RFPercentage(2),
        fontWeight: "bold",
        color: '#FFFFFF',
        textTransform: 'uppercase',
        fontStyle: 'normal'
    },
    btnContainer: {
        paddingTop: 8,
        width: '100%',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignContent: 'center'
    },
    signupBodyStyle: {
      position: "absolute",
      bottom: 0,
      width: '90%',
      marginBottom: 20,
    },
    signinSignupButtonsBtnsContainer: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-end',
      alignItems: 'center',
      width: '100%'
    },
    signupButtonBodyStyle: {
      flex: 1,
      backgroundColor: '#8A56AC',
      borderRadius: 100,
      alignItems: 'center',
      padding: 25
    },
    signinSignupTextStyle: {
      color: '#FFFFFF',
      fontSize: 18,
    }
  });

  const User = t.struct({
    name: t.String,
    email: t.String,
    password: t.String,
    "Confirm Password": t.String,
    location: t.String
  });

  const SignupForm = (props) => {

    const options = {
        auto: 'placeholders',
      };

    return (
        <View style={styles.SignupFormParent}>
            <View style={{ paddingLeft: 20, paddingRight: 20, marginTop: 80 }}>
                {/* <Text style={styles.text}>FORM</Text> */}
                <Form type={User} options={options}/>
            </View>
        </View>
    );
  };

  const ContinueButton = (props) => {
    const { onPress, style } = props;

    return (
      <TouchableOpacity onPress={onPress} style={style.bodyStyle}>
        <View
          style={style.buttonStyle}>
            <Text style={style.textStyle}>{props.title}</Text>
        </View>
      </TouchableOpacity>
    );
  }


  export default class SignUpView extends Component {

    // constructor(props) {

    // }

    fetch('${Config.IP}:${Config.PORT}/login', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: 'jayndoe@foobar.com',
          password: "jynd1234",
        }),
      })
      .then(response => response.json())
      .then(responseJson => {
        ToastAndroid.showWithGravity(
          JSON.stringify(responseJson),
          ToastAndroid.SHORT,
          ToastAndroid.CENTER,
        );
      })
      .catch(error => {
        ToastAndroid.showWithGravity(
          JSON.stringify(error),
          ToastAndroid.SHORT,
          ToastAndroid.CENTER,
        );
      })
    } 

    render() {
      return(
          <View style={styles.parentSectionContainer}>
              <KeyboardAvoidingView style={{ position: 'absolute', top: 0, width: '100%', backgroundColor: '#8A56AC', height: '30%', borderBottomLeftRadius: 120 }}/>
              <View style={{ position: 'absolute', top: 50, width: '100%', flexDirection: 'row', justifyContent: 'space-evenly', margin: 'auto' }}>
                <Text style={styles.textBold}>LOG IN</Text>
                <Text style={styles.textMelow}>SIGN UP</Text>
              </View>
              <SignupForm
                    title="SIGN UP USING INSTAGRAM"
                    onPress={() => {this.instagramSSO()}}
                    style={{formStyles: styles.formStyles}}
                  />
              <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center' }}>
                  <ContinueButton
                    title="CONTINUE"
                    style={{ bodyStyle: styles.signinBodyStyle, buttonStyle: styles.signinButtonBodyStyle, textStyle: styles.signinSignupTextStyle }}
                    onPress={() => Alert.alert('Please sign-in!!')}
                  />
              </View>
          </View>
        );
    }
  }

Благодарим Вас за любую помощь в решении этой проблемы:)

Answer 1

Это из-за абсолютного позиционирования ваших видов, я думаю, что вы использовали его, потому что вам нужно было поместить белую входную оболочку поверх фиолетового вида. Может быть, вы могли бы удалить абсолютное позиционирование и использовать вместо него отрицательный отступ padding для белой оболочки? Я не уверен, как этого добиться, используя передовой опыт, но это может помешать экранному экрану избегать нажатия других компонентов.