避免键盘推高内容

Question

我的布局如下：

我希望完成的是防止键盘一旦打开就不要将输入上方的所有内容向上推。取而代之的是，输入看起来类似于叠加层，并保持背景正常。有办法吗？

目前，我的结构如下：

const CommentModal = ({ showModal = false, post_id = null, setShowModel }) => {
    return (
        <Modal
            isVisible={showModal}
            animationInTiming={400}
            avoidKeyboard={true}
            coverScreen={true}
            hasBackdrop={true}
            backdropColor="transparent"
            deviceHeight={hp(100)}
            deviceWidth={wp(100)}
            onBackdropPress={() => setShowModel((prev) => !prev)}
            onSwipeComplete={() => setShowModel((prev) => !prev)}
            swipeDirection={[ 'down' ]}
            style={{
                height: hp(100),
                padding: 0,
                margin: 0,
                justifyContent: 'flex-end',
                backgroundColor: 'red'
            }}
        >
            <View
                style={{
                    backgroundColor: 'transparent',
                    justifyContent: 'flex-end',
                    height: '72%'
                }}
            >
                <View
                    style={{
                        height: '100%',
                        width: '100%',
                        backgroundColor: '#F6F7F8',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        shadowColor: '#000',
                        shadowOffset: {
                            width: 0,
                            height: 2
                        },
                        shadowOpacity: 0.25,
                        shadowRadius: 3.84,
                        elevation: 5
                    }}
                >
                    <CommentList />
                </View>
            </View>
            <CommentInput />
        </Modal>
    );
};

export default CommentModal;

评论输入为：

const CommentInputModal = () => {
    return (
        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
            <View style={{ backgroundColor: 'red' }}>
                <KeyboardAvoidingView
                    style={{
                        backgroundColor: 'red',
                        width: wp(100),
                        height: hp(10)
                    }}
                >
                    <TextInput
                        style={{
                            borderColor: 'gray',
                            borderWidth: 1,
                            borderRadius: 0,
                            height: '100%',
                            backgroundColor: 'white'
                        }}
                        onPress={Keyboard.dismiss}
                        placeholder="Add comment..."
                        returnKeyType="send"
                    />
                </KeyboardAvoidingView>
            </View>
        </TouchableWithoutFeedback>
    );
};

我试图通过React Native Navigation模版将其实现为一条路线，并为输入添加了一个模版，但会产生怪异的副作用。所有的帮助/建议都非常感谢。谢谢