javascript - 键盘更改所有组件在 native react 中的位置

Question

我创建了一个 AuthForm 组件，用于注册和登录屏幕，在设置屏幕样式后，我注意到每次单击键盘输入一些输入时，所有内容都会更改其原始位置，并且某些组件会覆盖其他组件，结果变得一团糟，我怎样才能解决这个问题？

这是我使用的代码

import React, { useState } from "react";
import {
  StyleSheet,
  ImageBackground,
  View,
  TouchableOpacity,
} from "react-native";
import { Text, Button, Input } from "react-native-elements";
import Icon from "react-native-vector-icons/MaterialIcons";
import Spacer from "./Spacer";

const AuthForm = ({
  headerText,
  errorMessage,
  onSubmit,
  submitButtonText,
  subText,
}) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <View style={styles.container}>
      <Spacer>
        <Text style={styles.Text1}>{headerText}</Text>
        <Text style={styles.Text2}>{subText}</Text>
      </Spacer>
      <View style={styles.Input}>
        <Input
          style={styles.Input}
          placeholder="Your email"
          value={email}
          onChangeText={setEmail}
          autoCapitalize="none"
          autoCorrect={false}
          leftIcon={<Icon name="email" size={20} color="#B3C1B3" />}
        />
        <Input
          secureTextEntry
          placeholder="Your password"
          value={password}
          onChangeText={setPassword}
          autoCapitalize="none"
          autoCorrect={false}
          leftIcon={<Icon name="lock" size={20} color="#B3C1B3" />}
        />
      </View>
      {errorMessage ? (
        <Text style={styles.errorMessage}>{errorMessage}</Text>
      ) : null}

      <Spacer>
        <TouchableOpacity
          style={styles.buttonStyle}
          onPress={() => onSubmit({ email, password })}
        >
          <Text style={styles.ButtonText}>{submitButtonText}</Text>
        </TouchableOpacity>
      </Spacer>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: "center",
  },
  errorMessage: {
    fontSize: 16,
    color: "red",
    marginLeft: 15,
    marginTop: 15,
    top: "35%",
  },
  buttonStyle: {
    color: "#e8c0c8",
    width: "45%",
    height: "25%",
    backgroundColor: "#fdc2e6",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 15,
    top: "150%",
    left: "30%",
  },
  ButtonText: {
    color: "#FFFF",
  },
  Text1: {
    top: "420%",
    left: "15%",
    fontSize: 24,
    color: "#ffffff",
  },
  Text2: {
    top: "420%",
    left: "15%",
    fontSize: 14,
    color: "#d9d9d9",
  },
  Input: {
    top: "40%",
    width: "70%",
    left: "15%",
  },
});

export default AuthForm;

Answer 1

2020 年 6 月 29 日更新。EXPO SDK 38 已发布，此设置可在 app.json 上使用

{
  "expo": {
    ...your app.json expo config,
    "android": {
      "softwareKeyboardLayoutMode": "pan"
    }
  }
}

引用expo blog中的内容

New android.softwareKeyboardLayoutMode app.json key One tricky part ofbuilding forms in mobile apps is that developers need to ensure thatthe on-screen “software keyboard” doesn’t obscure the focused formelement. Android lets you pick how you want this to be handled: youcan resize the entire window so nothing will be drawn under thekeyboard, or you can pan the window so the content is not underneathit. The native property that lets you control this isandroid:windowSoftInputMode .

In the past, all Expo apps have been configured to use the resizemode, but some developers have found this to be problematic for theirapps because UI elements such as tab bars will be pushed up above thekeyboard when it is enabled. If you would prefer to use the pan mode,you can now set the layout mode directly withandroid.softwareKeyboardLayoutMode in your app configuration. Find thekey in the "android" section of "Configuration with app.json".

关于此设置的引用: https://docs.expo.io/workflow/configuration/#android

38届世博会前回答
我想你可能会在 Android 上观察到这个问题，但在 iOS 上却没有？
在这种情况下，您必须设置 android:windowSoftInputMode="adjustPan"在您的 list 文件中
例如。

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  ...
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    ...
    android:windowSoftInputMode="adjustPan">
    ...
  </activity>
  ...
</application>