在 React Native 中，IOS 模拟器上没有显示键盘？

Question

我不知道为什么只有 IOS 模拟器键盘没有显示但是在 android 上它工作正常。我正在尝试获取用户输入以进行身份验证并将数据发送到实时数据库 firebase。

import React, { useState, useReducer, useEffect, useCallback } from "react";
import {
  KeyboardAvoidingView,
  ScrollView,
  View,
  Button,
  StyleSheet,
  ActivityIndicator,
  Alert,
} from "react-native";
import { useDispatch } from "react-redux";

import Input from "../../components/UI/Input";
import Card from "../../components/UI/Card";
import Colors from "../../constants/Colors";
import * as authActions from "../../store/actions/Auth";

const FORM_INPUT_UPDATE = "FORM_INPUT_UPDATE";

const formReducer = (state, action) => {
  if (action.type === FORM_INPUT_UPDATE) {
    const updatedValues = {
      ...state.inputValues,
      [action.input]: action.value,
    };
    const updatedValidities = {
      ...state.inputValidities,
      [action.input]: action.isValid,
    };
    let updatedIsFormValid = true;
    for (const key in updatedIsFormValid) {
      updatedIsFormValid = updatedIsFormValid && updatedValidities[key];
    }
    return {
      formIsValid: updatedIsFormValid,
      inputValidities: updatedValidities,
      inputValues: updatedValues,
    };
  }
  return state;
};

const AuthenticationScreen = (props) => {
  const [Isloading, setIsloading] = useState(false);
  const [error, setError] = useState();
  const [IsSignup, setIsSignup] = useState(false);
  const dispatch = useDispatch();

  const [formState, dispatchFormState] = useReducer(formReducer, {
    inputValues: {
      email: "",
      password: "",
    },
    inputValidities: {
      email: false,
      password: false,
    },
    formIsValid: false,
  });

  const authHandler = async () => {
    let action;
    if (IsSignup) {
      action = authActions.signup(
        formState.inputValues.email,
        formState.inputValues.password
      );
    } else {
      action = authActions.login(
        formState.inputValues.email,
        formState.inputValues.password
      );
    }
    setError(null);
    setIsloading(true);
    try {
      await dispatch(action);
      props.navigation.navigate("Shop");
    } catch (error) {
      setError(error.message);
      setIsloading(false);
    }
  };

  useEffect(() => {
    if (error) {
      Alert.alert("An error occurred ", error, [{ text: "Okay" }]);
    }
  }, [error]);

  const inputChangeHandler = useCallback(
    (inputIdentifier, inputValues, inputValidities) => {
      dispatchFormState({
        type: FORM_INPUT_UPDATE,
        value: inputValues,
        isValid: inputValidities,
        input: inputIdentifier,
      });
    },
    [dispatchFormState]
  );
  return (
    <KeyboardAvoidingView
      behaviour="padding"
      keyboardVerticalOffset={50}
      style={styles.screen}
    >
      <Card style={styles.auth}>
        <ScrollView>
          <Input
            id="email"
            label="E-mail"
            keyboardType="email-address"
            required
            email
            autoCapitalize="none"
            warningText="Please enter valid Email Address"
            onInputChange={inputChangeHandler}
            intialValue=""
          />
          <Input
            id="password"
            label="Password"
            keyboardType="default"
            secureTextEntry
            required
            minLength={5}
            autoCapitalize="none"
            warningText="Please enter valid Password"
            onInputChange={inputChangeHandler}
            intialValue=""
          />
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              {Isloading ? (
                <ActivityIndicator size="large" color={Colors.primary} />
              ) : (
                <Button
                  title={IsSignup ? "Sign up" : "Login"}
                  color={Colors.primary}
                  onPress={authHandler}
                />
              )}
            </View>
            <View style={styles.button}>
              <Button
                title={`Switch to ${IsSignup ? "Login" : "Sign Up"}`}
                color={Colors.secondary}
                onPress={() => {
                  setIsSignup((prevState) => !prevState);
                }}
              />
            </View>
          </View>
        </ScrollView>
      </Card>
    </KeyboardAvoidingView>
  );
};

AuthenticationScreen.navigationOptions = {
  headerTitle: "Authenticate",
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  auth: {
    width: "80%",
    maxWidth: 400,
    maxWidth: 400,
    padding: 20,
  },
  buttonContainer: {
    marginTop: 20,
  },
  button: {
    margin: 5,
  },
});

export default AuthenticationScreen;

我只能用我的笔记本电脑键盘输入电子邮件和密码，我尝试点击这两个字段来检查 IOS 模拟器弹出窗口中是否有键盘。

键盘在 android 模拟器上工作正常。

Answer 1

模拟器检测到您有可用的外部键盘，因此不显示软件键盘。您可以使用 I/O -> Keyboard -> Connect Hardware Keyboard 禁用此行为。或者您可以 Command + K 手动切换软键盘。

在 React Native 中，IOS 模拟器上没有显示键盘？

Keyboard isn't showing on IOS emulator in react native?

javascript

reactjs

react-native

react-native-android

react-native-ios