方向更改后，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"為我解決了這個問題。 似乎在旋轉設備后，鍵盤在橫向和縱向模式下的高度會相互添加/減去，從而導致這種奇怪的行為。