[英]React Native KeyboardAvoidingView not working properly after orientation changes
while trying out KeyboardAvoidingView with the Expo Go app and npm create-react-native-app
on Android I noticed a weird behaviour after a device rotation.在使用 Expo Go 应用程序和
npm create-react-native-app
在 Android 上试用KeyboardAvoidingView时,我注意到设备旋转后出现奇怪的行为。
Here is a short clip showing what happens: KeyboardAvoidingView and rotating device这是一个显示所发生情况的短片: KeyboardAvoidingView 和旋转设备
How can one prevent this from happening?如何防止这种情况发生?
Here is the code I used for create-react-native-app
(I only changed the name of the component):这是我用于
create-react-native-app
的代码(我只更改了组件的名称):
import React from 'react';
import {
View,
KeyboardAvoidingView,
TextInput,
StyleSheet,
Text,
Platform,
TouchableWithoutFeedback,
Button,
Keyboard,
} from 'react-native';
const App = () => {
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.inner}>
<Text style={styles.header}>Header</Text>
<TextInput placeholder="Username" style={styles.textInput} />
<View style={styles.btnContainer}>
<Button title="Submit" onPress={() => null} />
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
inner: {
padding: 24,
flex: 1,
justifyContent: 'space-around',
},
header: {
fontSize: 36,
marginBottom: 48,
},
textInput: {
height: 40,
borderColor: '#000000',
borderBottomWidth: 1,
marginBottom: 36,
},
btnContainer: {
backgroundColor: 'white',
marginTop: 12,
},
});
export default App;
Adding keyboardVerticalOffset="-999999"
fixed the issue for me.添加
keyboardVerticalOffset="-999999"
为我解决了这个问题。 It seems that after rotating the device the height of the keyboard in landscape- and portraitmode are added/subtracted from each other, leading to this weird behaviour.似乎在旋转设备后,键盘在横向和纵向模式下的高度会相互添加/减去,从而导致这种奇怪的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.