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

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="[e-mail]"
          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;

屏幕截图登录屏幕：[打开键盘前的图像]：[打开键盘后的图像]

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

其他屏幕截图：[不带键盘] [带键盘]

标签： react-nativereact-native-androidkeyboard-layout

Answer 1

您可以尝试react-native-keyboard-aware-scroll-view。