Android端React Native键盘唤起时Modal被上推的问题排查

我基于Expo实现了一个内部包含TextInput的简易Modal组件，在Android端唤起键盘时，整个Modal视图会被向上推。对于小型Modal来说这没什么影响，但如果Modal高度较大且TextInput位于顶部位置，就会导致Modal上方的文本被推出可视区域。

我已经尝试过以下几种解决方案，但都没有解决问题：

• 在Expo的app.json中配置expo/android/softwareKeyboardLayoutMode: "pan"
• 使用KeyboardAvoidingView组件
• 使用第三方组件react-native-modal

以下是我的测试代码：

import React, { useState } from 'react';
import { View, Text, Button, KeyboardAvoidingView, StatusBar, Dimensions } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import Modal from 'react-native-modal';

const TestModal = ({ visible, onClose }) => {

const window = Dimensions.get('window');
const WINDOW_HEIGHT = window.height;

  return (
    <Modal animationType="fade" visible={visible} onRequestClose={onClose} avoidKeyboard={true} style={{ alignItems: 'center' }}>
      <View style={{ alignItems: 'center', backgroundColor: 'grey', width: 350, height: WINDOW_HEIGHT * 0.8, borderRadius: 10 }}>
        <Text>This is a modal</Text>

        <TextInput style={{ width: 100, height: 40, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
        <Button title="Close Modal" onPress={onClose} />
      </View>
    </Modal>
  );
};

export default TestModal;

问题演示：

内容的提问来源于stack exchange，提问作者AnyamBorogass