去除react-native-gifted-chat中连续消息的缩进问题

问题背景 #

已通过showAvatarForEveryMessage={false}、showUserAvatar={false}和renderAvatar={() => null}隐藏所有头像，但连续消息仍存在缩进，需消除该预留空间。

解决方案 #

Gifted Chat默认会为头像区域预留固定margin，即使头像隐藏也不会自动移除，需手动覆盖对应样式：

方法1：直接修改messageContainerStyle

在GiftedChat组件中添加messageContainerStyle属性，重置左右margin：

<GiftedChat
    messages={messages}
    timeFormat="HH:mm"
    dateFormat="ll"
    onSend={message => onSend(message)}
    placeholder="Message"
    user={{
        _id: 1,
    }}
    showAvatarForEveryMessage={false}
    showUserAvatar={false}
    renderAvatar={() => null}
    renderComposer={props => customComposer(props)}
    renderSend={props => customSendButton(props)}
    renderInputToolbar={props => customInputToolbar(props)}
    renderTicks={message => customTicks(message)}
    // 添加以下样式配置
    messageContainerStyle={{
        left: { marginLeft: 0 }, // 对方消息取消左侧头像预留空间
        right: { marginRight: 0 } // 当前用户消息取消右侧头像预留空间
    }}
/>

方法2：自定义renderMessageContainer完全控制容器样式

如果方法1不生效，可自定义消息容器组件，直接移除所有预留margin：

const renderMessageContainer = (props) => {
    const isCurrentUser = props.currentUser._id === props.message.user._id;
    return (
        <View
            style={{
                flexDirection: isCurrentUser ? 'row-reverse' : 'row',
                marginVertical: 4,
                marginLeft: 0,
                marginRight: 0,
            }}
        >
            {props.children}
        </View>
    );
};

// 在GiftedChat中使用
<GiftedChat
    // 其他现有属性
    renderMessageContainer={renderMessageContainer}
/>

原始配置参考 #

GiftedChat组件配置

<GiftedChat
    messages={messages}
    timeFormat="HH:mm"
    dateFormat="ll"
    onSend={message => onSend(message)}
    placeholder="Message"
    user={{
        _id: 1,
    }}
    showAvatarForEveryMessage={false}
    showUserAvatar={false}
    renderAvatar={() => null}
    renderComposer={props => customComposer(props)}
    renderSend={props => customSendButton(props)}
    renderInputToolbar={props => customInputToolbar(props)}
    renderTicks={message => customTicks(message)}
/>

消息构造代码

message = {
    _id: message.id,
    text: message.content,
    createdAt: new Date(message.timestamp),
    user: {
        _id: user.id == message.author_id ? 1 : 2,
        name: message.username,
        avatar: message.avatar_url
    },
    sent: true,
    received: true,
    pending: true,
    isTyping: false,
}

内容的提问来源于stack exchange，提问作者xotix