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

Question

我正在为我的React Native应用程序使用React-Native-gifted chat包。不知何故，作曲家和键盘之间有一个空格，尽管我没有定制GiftedChat。

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

​

​

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

Answer 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} //添加此行并删除空格

Answer 2

安装react-native-iphone-x-helper

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

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



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