如何避免键盘在本机反应中推动整个布局？

Question

我正在制作一个反应原生的应用程序。每当我打开键盘时，我的整个布局都会向上移动，找不到解决方案。我已经尝试过使用键盘避免视图、键盘滚动视图和将 softwareKeyboardLayoutMode 调整为“Pan”。如果我使用这些，则滚动不起作用。下面是我的代码

import React, { useState } from "react";
import { View, Text, Image, Alert, TouchableOpacity } from "react-native";

...//(irrelevant code removed)//...

  return (
    <View style={common.containerStyle}>
      <Image
        style={common.LogoImageStyle}
        source={require("../../assets/splash.png")}
      />
      <Text style={common.textHeadingStyle}>SIGN UP</Text>

      <ScrollView>
        <TextInputComponent
          label="Full Name"
          placeholderTextColor={colors.placeHolderColor}
          onChangeText={(val) => fullNameTextChange(val)}
          onEndEditing={(e) => handleValidUser(e.nativeEvent.text)}
        />
        {data.isValidUser ? null : (
          <Animatable.View animation="fadeInLeft" duration={500}>
            <Text style={common.errorMsg}>User must be 4 characters long</Text>
          </Animatable.View>
        )}

        <TextInputComponent
          label="Email"
          placeholder="email@address.com"
          placeholderTextColor={colors.placeHolderColor}
          onChangeText={(val) => emailTextChange(val)}
          onEndEditing={(e) => handleValidEmail(e.nativeEvent.text)}
        />
        {data.isValidEmail ? null : (
          <Animatable.View animation="fadeInLeft" duration={500}>
            <Text style={common.errorMsg}>Email must be 5 characters long</Text>
          </Animatable.View>
        )}

        <TextInputComponent
          label="Password"
          placeholder="********"
          placeholderTextColor={colors.placeHolderColor}
          onChangeText={(val) => passwordTextChange(val)}
          secureTextEntry={true}
          onEndEditing={(e) => handleValidPassword(e.nativeEvent.text)}
        />
        {data.isValidPassword ? null : (
          <Animatable.View animation="fadeInLeft" duration={500}>
            <Text style={common.errorMsg}>
              Password must be 5 characters long
            </Text>
          </Animatable.View>
        )}

        <TextInputComponent
          label="Mobile #"
          placeholder="03001234567"
          placeholderTextColor={colors.placeHolderColor}
          onChangeText={(val) => mobileTextChange(val)}
          onEndEditing={(e) => handleValidMobile(e.nativeEvent.text)}
          keyboardType="numeric"
        />
        {data.isValidMobile ? null : (
          <Animatable.View animation="fadeInLeft" duration={500}>
            <Text style={common.errorMsg}>
              Mobile must be 5 characters long
            </Text>
          </Animatable.View>
        )}
      </ScrollView>

      <ButtonComponent
        label="SIGN UP"
        onPress={() => {
          signUpHandle(data.email, data.password, data.fullName, data.mobile);
        }}
      />

      <View style={common.createAccountViewStyle}>
        <View style={common.flexRow}>
          <Text style={LoginStyle.noAccountText}>Already have an account?</Text>
          <TouchableOpacity
            onPress={() => {
              navigation.pop();
            }}
          >
            <Text style={LoginStyle.createAccountStyle}>LOGIN</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};
export default SignUp;

屏幕截图登录屏幕：[Image before open keyboard]：[Image after open keyboard]

我希望将登录按钮固定在底部。其他屏幕中也有同样的问题。请指导。

其他屏幕截图：[without keyboard] [with keyboard]

Answer 1

你可以试试react-native-keyboard-aware-scroll-view。