方向更改后，React Native KeyboardAvoidingView 无法正常工作

Question

在使用 Expo Go 应用程序和npm create-react-native-app在 Android 上试用KeyboardAvoidingView时，我注意到设备旋转后出现奇怪的行为。

1. 当我以纵向模式启动应用程序然后切换到横向时，KeyboardAvoidingView 在点击 TextInput 时根本没有被推高或没有被推得足够高之间循环。 此外，当隐藏键盘时，按钮每隔两次就会保持隐藏状态。
2. 当我以横向模式启动应用程序然后切换到纵向模式时，KeyboardAvoidingView 总是被推高很多。

这是一个显示所发生情况的短片： KeyboardAvoidingView 和旋转设备

如何防止这种情况发生？

这是我用于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;

Answer 1

添加keyboardVerticalOffset="-999999"为我解决了这个问题。 似乎在旋转设备后，键盘在横向和纵向模式下的高度会相互添加/减去，从而导致这种奇怪的行为。