React Native聊天UI消息项用户头像显示逻辑实现问题

需求梳理 #

头像仅在以下两种场景显示：

• 当前消息是新发送者序列的第一条（上一条消息的发送者与当前消息不同）
• 当前消息是同一发送者连续消息的最后一条

步骤1：传递消息列表到MessageCard #

当前MessageCard仅能获取单条消息和索引，需要把完整的消息列表作为props传入，修改FlatList代码：

<FlatList 
  vertical={true} 
  data={root.mapStore.activeChatMessages} 
  keyExtractor={item => item.provisionalId.toString()}
  renderItem={({ item, index }) => 
    <MessageCard1 
      item={item} 
      index={index}
      messages={root.mapStore.activeChatMessages}
    />
  }
/>

步骤2：实现showUserImage逻辑 #

修改MessageCard组件，补充头像显示判断逻辑，同时修复原代码中的语法错误：

export default MessageCard= observer((props) => 
{   
    const { item, index, messages } = props;

    const showUserImage = () => {
        const prevMessage = index > 0 ? messages[index - 1] : null;
        const nextMessage = index < messages.length - 1 ? messages[index + 1] : null;

        // 第一条消息直接显示头像
        if (!prevMessage) return true;

        // 判断是否是新发送者的第一条消息
        const isFirstInSequence = prevMessage.user_id !== item.user_id;
        // 判断是否是当前发送者连续消息的最后一条
        const isLastInSequence = !nextMessage || nextMessage.user_id !== item.user_id;

        // 满足任一条件则显示头像
        return isFirstInSequence || isLastInSequence;
    };

    return (
        <View style={{ width:'60%', flexDirection:'row', alignItems:'center' }}>
            { showUserImage() && (
                {/* 替换为实际的头像字段和样式 */}
                <Image 
                  source={{ uri: item.user_avatar_url }} 
                  style={{ width: 40, height: 40, borderRadius: 20, marginRight: 8 }} 
                />
            )}
            <Text>{ item.messageBody }</Text>
        </View>
    );
});

说明 #

• 请将item.user_avatar_url替换为消息对象中实际的头像地址字段
• 样式可根据UI需求调整，示例中使用了圆形头像的常见样式
• 逻辑完全匹配需求：新发送者的第一条消息显示头像，同一用户连续发送的消息仅最后一条显示头像

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