键盘更改所有组件在本机反应中的位置

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

新的 android.softwareKeyboardLayoutMode app.json 键 在移动应用程序中构建 forms 的一个棘手部分是开发人员需要确保屏幕上聚焦的“软件键盘”不会模糊。 Android 让您选择您希望如何处理它：您可以调整整个 window 的大小，因此不会在键盘下方绘制任何内容，或者您可以平移 window，因此内容不在它下方。 让您控制它的本机属性是 android:windowSoftInputMode。

过去，所有 Expo 应用程序都已配置为使用调整大小模式，但一些开发人员发现这对其应用程序存在问题，因为启用它时，诸如标签栏之类的 UI 元素会被推到键盘上方。 如果您更喜欢使用平移模式，您现在可以在应用配置中直接使用 android.softwareKeyboardLayoutMode 设置布局模式。 在“使用 app.json 配置”的“android”部分中找到密钥。

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

---

Expo 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