键盘改变所有组件的位置反应原生

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中的内容

新的 android.softwareKeyboardLayoutMode app.json key 一个棘手的部分 在移动应用程序中构建表单是开发人员需要确保 屏幕上的“软件键盘”不会遮挡焦点表格 元素。 Android 让你选择你希望如何处理这个问题：你 可以调整整个窗口的大小，因此不会在 键盘，或者您可以平移窗口，使内容不在下方 它。让您控制它的本机属性是 android:windowSoftInputMode .

过去，所有 Expo 应用程序都已配置为使用调整大小 模式，但一些开发人员发现这对他们的 应用程序，因为标签栏等 UI 元素将被推到 键盘启用时。如果您更喜欢使用平移模式， 您现在可以直接设置布局模式 android.softwareKeyboardLayoutMode 在您的应用配置中。找出 键入“使用 app.json 进行配置”的“android”部分。

关于此设置的参考：https://docs.expo.io/workflow/configuration/#android

---

38 届世博会前的回答

我想您可能在 Android 上发现了这个问题，但在 iOS 上却没有？

在这种情况下，您必须在清单文件中设置 android:windowSoftInputMode="adjustPan"

例如

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

Answer 2

您需要使用一个名为 KeyboardAvoidingView 的组件。 以下是官方文档的链接以及使用示例：https://facebook.github.io/react-native/docs/keyboardavoidingview