在React-Native-Gifted-Chat中删除键盘和 composer 之间的空格

mepcadol  于 2023-01-27  发布在  React
关注(0)|答案(3)|浏览(143)

我在我的React Native应用程序中使用react-native-gifted-chat包,不知何故, composer 和键盘之间有一个空间,尽管我没有定制giftedchat。
在随附屏幕截图中标记为橙子:

我已经试过自定义 composer 或任何其他组成部分,没有效果。

nwsw7zdq

nwsw7zdq1#

我也面临着同样的问题,一段时间后,我找到了这个解决方案,它的工作对我来说。

<GiftedChat
                    isAnimated
                    messages={this.state.messages}
                    scrollToBottom={true}
                    renderUsernameOnMessage={true}
                    onSend={messages => this.onSend(messages)}
                    inverted={false}
                    isLoadingEarlier={true}
                    messagesContainerStyle={{ color: 'gray' }}
                    bottomOffset={0} // add this line and space is remove
                    renderBubble={props => {
                        return (
                            <Bubble
                                {...props}

                                textStyle={{
                                    right: {
                                        color: 'white',
                                    },
                                    left: {
                                        color: '#24204F',
                                    },
                                }}
                                wrapperStyle={{
                                    left: {
                                        backgroundColor: 'white',
                                    },
                                    right: {
                                        backgroundColor: "#ff3b00", // red
                                    },
                                }}
                            />
                        );
                    }}
                    renderInputToolbar={props => {
                        return (<InputToolbar {...props} containerStyle={{ backgroundColor: '#e2e2e2' }} />);
                    }}
                    user={{
                        _id: 1
                    }}
                />

希望这对您有用bottomOffset={0} //添加此行并删除空格

crcmnpdw

crcmnpdw2#

安装react-native-iphone-x-助手
并根据代码添加这些行。

import { getBottomSpace } from 'react-native-iphone-x-helper';


<GiftedChat 
    bottomOffset={getBottomSpace()}
    ...
/>
but5z9lq

but5z9lq3#

就像在文档中找到的一样,只需获取插图:

const insets = useSafeAreaInsets();
<GiftedChat
   bottomOffset={insets.bottom}
   ...
 />

这将动态修复您的问题。

相关问题