在 React-Native-Gifted-Chat 中删除键盘和作曲家之间的空间答案

【问题标题】：Remove space between keyboard and composer in React-Native-Gifted-Chat在 React-Native-Gifted-Chat 中删除键盘和作曲家之间的空间
【发布时间】：2021-04-11 03:35:26
【问题描述】：

我正在为我的 React Native 应用程序使用 react-native-gifted-chat 包。不知何故，作曲家和键盘之间有一个空间，虽然我没有自定义 GiftedChat。

在所附屏幕截图中标记为橙色：

我已经尝试自定义作曲家或任何其他组件，但没有效果。

【问题讨论】：

标签： react-native react-native-gifted-chat

【解决方案1】：

一段时间后我也遇到了同样的问题，我找到了这个解决方案，它对我有用。

     <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} // 加上这一行，去掉空格

【讨论】：

你在两个操作系统上都测试过吗？
@MarioMurrent 我正在 ios 中进行测试，但在 android 中，您必须按照安装步骤进行操作。
好的，我再试一次 - 现在它不起作用，消息窗口超出了可见区域
@MarioMurrent 您是否尝试在代码中使用 bottomOffset={0}，因为它在 ios 中对我有用。

【解决方案2】：

安装 react-native-iphone-x-helper

并根据您的代码添加这些行。

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



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

【讨论】：

这会删除空格吗？这也适用于 Expo 应用程序吗？
是的，我也在我的应用程序中使用了它。但我不知道这将如何作用于世博会应用程序。
好的，我会试一试，然后告诉你。谢谢
真的不行:(