Клавиатура меняет размещение всех компонентов в React Native

Question

• 1000 беспорядок, как я могу это исправить?

Вот код, который я использовал

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

Обновление 29 июня 2020 г. EXPO SDK 38 отсутствует, и этот параметр доступен на app.json

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

См. Содержимое в блоге expo

Новое приложение android .softwareKeyboardLayoutMode. json клавиша Одна сложная часть построения форм в мобильных приложениях состоит в том, что разработчикам необходимо следить за тем, чтобы экранная «программная клавиатура» не закрывала фокусируемый элемент формы. Android позволяет вам выбрать, как вы хотите, чтобы это было обработано: вы можете изменить размер всего окна, чтобы ничего не отображалось под клавиатурой, или вы можете сдвинуть окно, чтобы содержимое не находилось под ним. Собственное свойство, которое позволяет управлять этим, - android: windowSoftInputMode.

Раньше все приложения Expo были настроены на использование режима изменения размера, но некоторые разработчики обнаружили, что это проблематично для c для их приложения, потому что элементы пользовательского интерфейса, такие как панели вкладок, будут выдвинуты над клавиатурой, когда она включена. Если вы предпочитаете использовать режим панорамирования, теперь вы можете установить режим макета напрямую с помощью android .softwareKeyboardLayoutMode в конфигурации вашего приложения. Найдите ключ в разделе «android» раздела «Конфигурация с приложением. json».

Ссылка на этот параметр: 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