Reactjs 避免键盘向上推内容

我的布局如下：

我希望实现的是防止键盘一旦打开就无法将输入上方的所有内容向上推。取而代之的是，输入看起来类似于叠加，并保持背景正常。有没有办法解决这个问题

目前，我的工作结构如下：

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 commentmodel=（{showmodel=false，post_id=null，setShowModel}）=>{
返回(
setShowModel（（prev）=>！prev）}
onSwipeComplete={（）=>setShowModel（（prev）=>！prev）}
swipeDirection={['down']}
风格={{
高度：马力（100），
填充：0，
保证金：0，
justifyContent:“柔性端”，
背景颜色：“红色”
}}
>
);
};
导出默认模式；

注释输入为：

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>
    );
};

const CommentInputModal=（）=>{
返回(
);
};

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