KeyboardAvoidingView在React原生布局上不起作用

import React, { useState, useEffect } from 'react';
import { View, TextInput, Keyboard, Dimensions } from 'react-native';

const App = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      (e) => {
        setKeyboardHeight(e.endCoordinates.height);
      }
    );

    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardHeight(0);
      }
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        {/* Your content here */}
        <TextInput placeholder="Input" />
      </View>
      <View style={{ height: keyboardHeight }} />
    </View>
  );
};

export default App;