[英]Keyboard dosen't pop up when I click TextInput field on React Native
I am not able to get keyboard popped in IOS simulator.我无法在 IOS 模拟器中弹出键盘。 I have the video link if you want to have closer look.
如果你想仔细看看,我有视频链接。 In android it was all good.
在android中一切都很好。 Here's link for video: https://youtu.be/JKfPlXFvP6Q
这是视频链接: https : //youtu.be/JKfPlXFvP6Q
Below is code for Startgamescreen.js下面是 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;
Also here's code for Input.js还有这里的 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;
I know it's a big chunk of code but I have only one problem.我知道这是一大块代码,但我只有一个问题。 Any help would be appreciated.
任何帮助,将不胜感激。
在模拟器菜单中尝试:硬件 > 键盘 > 切换软件键盘
I am not sure in which version the menu options changed, but with Version 12.xx, the correct option is I/O > Keyboard > Toggle Software Keyboard.我不确定菜单选项在哪个版本中发生了变化,但对于 12.xx 版,正确的选项是 I/O > 键盘 > 切换软件键盘。
Optionally you can press ⌘+K .或者,您可以按 ⌘+K 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.