我在我的React Native应用程序中使用react-native-gifted-chat包,不知何故, composer 和键盘之间有一个空间,尽管我没有定制giftedchat。在随附屏幕截图中标记为橙子:
我已经试过自定义 composer 或任何其他组成部分,没有效果。
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} //添加此行并删除空格
crcmnpdw2#
安装react-native-iphone-x-助手并根据代码添加这些行。
import { getBottomSpace } from 'react-native-iphone-x-helper'; <GiftedChat bottomOffset={getBottomSpace()} ... />
but5z9lq3#
就像在文档中找到的一样,只需获取插图:
const insets = useSafeAreaInsets(); <GiftedChat bottomOffset={insets.bottom} ... />
这将动态修复您的问题。
3条答案
按热度按时间nwsw7zdq1#
我也面临着同样的问题,一段时间后,我找到了这个解决方案,它的工作对我来说。
希望这对您有用bottomOffset={0} //添加此行并删除空格
crcmnpdw2#
安装react-native-iphone-x-助手
并根据代码添加这些行。
but5z9lq3#
就像在文档中找到的一样,只需获取插图:
这将动态修复您的问题。