避免键盘推高内容

问题描述

我的布局如下：

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

目前，我的结构如下：

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',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模版将其实现为一条路线，并为输入添加了一个模版，但会产生怪异的副作用。所有的帮助/建议都非常感谢。谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）