在 React-Native-Gifted-Chat 中刪除鍵盤和作曲家之間的空格

Question

我正在為我的 React Native 應用程序使用 react-native-gifted-chat package。 雖然我沒有自定義 GiftedChat，但作曲家和鍵盤之間不知何故有一個空間。

所附屏幕截圖中標記為橙色：

我已經嘗試自定義作曲家或任何其他組件，但沒有效果。

Answer 1

安裝 react-native-iphone-x-helper

並根據您的代碼添加這些行。

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



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

Answer 2

一段時間后，我也遇到了同樣的問題，我找到了這個解決方案，它對我有用。

     <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 3

正如在文檔本身上找到的那樣，只需獲取插圖：

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

這將動態解決您的問題。