当我单击 React Native 上的 TextInput 字段时，键盘不会弹出

Question

我无法在 IOS 模拟器中弹出键盘。 如果你想仔细看看，我有视频链接。 在android中一切都很好。 这是视频链接： https : //youtu.be/JKfPlXFvP6Q

下面是 Startgamescreen.js 的代码

import React, { useState } from 'react';



import {
  View,
  Text,
  StyleSheet,
  Button,
  TouchableWithoutFeedback,
  Keyboard
} from 'react-native';


import Card from '../components/Card';
import Input from '../components/Input';
import Colors from '../constants/colors';

const StartGameScreen = props => {

const [enteredValue, setEnteredValue] = useState(''); //function which uses array to get input number from user

 const [confirmed, setConfirmed] = useState(false); // calling use state to verify user choice

const [selectedNumber, setSelectedNumber]=useState();

const numberInputHandler = inputText => {              // function to get number inputted by user 
    setEnteredValue(inputText.replace(/[^0-9]/g, '')); // excluding any character that is not from textinput
  };

const resetInputHandler = props => {
  setEnteredValue('');    // set this to empty string to reset user input in keyboard
setConfirmed(false);
};

const confirmInputHandler = () =>{
  const chosenNumber = parseInt(enteredValue);

  if (chosenNumber === NaN || chosenNumber<=0 || chosenNumber>99)    //default value of JS if its not a number
  {
    return;
  }

  setConfirmed(true);

  setSelectedNumber(chosenNumber); // saving selected number and converting it to string

  setEnteredValue('');   // resetting user input
};

 let confirmedOutput;
 if (confirmed){
   confirmedOutput= <Text> chosen number : {selectedNumber} </Text>
 }

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        Keyboard.dismiss();

      }}
    >

      <View style={styles.screen}>
        <Text style={styles.title}>Start a New Game!</Text>
        <Card style={styles.inputContainer}>
          <Text>Select a Number</Text>
          <Input
            style={styles.input}
            blurOnSubmit
            autoCapitalize="none"
            autoCorrect={false}
            keyboardType="number-pad"
            maxLength={2}
            onChangeText={numberInputHandler}    // to handle user input
            value={enteredValue}
          />
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Button 
              title="Confirm" 
              onPress={confirmInputHandler} 
              color={Colors.accent} />
            </View>
            <View style={styles.button}>
              <Button
                title="Reset"
                onPress={resetInputHandler}
                color={Colors.primary}
              />
            </View>
          </View>
        </Card>
        {confirmedOutput}
      </View>
    </TouchableWithoutFeedback>
  );
};


const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 10,
    alignItems: 'center'
  },

  title: {
    fontSize: 20,
    marginVertical: 10
  },

  inputContainer: {
    width: 300,
    maxWidth: '80%',
    alignItems: 'center'
  },

  buttonContainer: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    paddingHorizontal: 15
  },

  button: {
    width: 100
  },

  input: {
    width: 50,
    textAlign: 'center'
  }
});


export default StartGameScreen;

还有这里的 Input.js 代码

import React from 'react';

import { TextInput, StyleSheet } from 'react-native';


const Input = props => {
  return <TextInput {...props} style={{ ...styles.input, ...props.style }} />;
};

const styles = StyleSheet.create({

  input: {
    height: 30,
    borderBottomColor: 'grey',
    borderBottomWidth: 1,
    marginVertical: 10
  }

});

export default Input;

我知道这是一大块代码，但我只有一个问题。 任何帮助，将不胜感激。

Answer 1

在模拟器菜单中尝试：硬件 > 键盘 > 切换软件键盘

Answer 2

我不确定菜单选项在哪个版本中发生了变化，但对于 12.xx 版，正确的选项是 I/O > 键盘 > 切换软件键盘。

或者，您可以按 ⌘+K 。