React Native聊天应用中连续消息的用户头像显示策略

import React from 'react';
import { FlatList, View, Text, Image } from 'react-native';
import { observer } from 'mobx-react-lite'; // 假设使用MobX进行状态管理

// 假设 root.mapStore.activeChatMessages 是一个MobX observable数组
// 实际应用中，您可能从Redux store、Context API或其他状态管理方案获取数据
const MessageList = observer(() => {
    // 假设 root.mapStore.activeChatMessages 包含所有聊天消息
    // 每条消息对象应至少包含 { provisionalId: string, user_id: string, messageBody: string }
    const messages = root.mapStore.activeChatMessages; 

    return (
        <FlatList 
            vertical={true} 
            data={messages} 
            keyExtractor={item => item.provisionalId.toString()}
            renderItem={({ item, index }) => 
                <MessageCard item={item} index={index} messages={messages} />
            }
        />
    );
});

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { observer } from 'mobx-react-lite';

// 假设这里有一个获取用户头像URL的函数
const getUserAvatarUrl = (userId) => {
    // 实际应用中，这可能从用户数据中获取
    return `https://example.com/avatars/${userId}.png`; 
};

const MessageCard = observer(({ item, index, messages }) => {
    // item: 当前消息对象
    // index: 当前消息在消息数组中的索引
    // messages: 完整的消息数组，用于访问相邻消息

    const showUserImage = () => {
        const previousMessage = messages[index - 1];
        const nextMessage = messages[index + 1];

        // 规则1：如果当前消息是该用户发送的第一条消息
        // 或上一条消息是由不同用户发送的
        const isFirstInSequence = !previousMessage || previousMessage.user_id !== item.user_id;

        // 规则2：如果当前消息是该用户发送的最后一条消息
        // 或下一条消息是由不同用户发送的
        const isLastInSequence = !nextMessage || nextMessage.user_id !== item.user_id;

        // 只有当当前消息是其所属用户连续发送消息序列中的“最后一条”时，才显示头像
        // 也就是说，它必须是其序列中的第一条（或者没有前一条），并且是其序列中的最后一条（或者没有后一条）
        // 修正逻辑：头像应该显示在连续消息块的末尾
        // 因此，我们检查：
        // 1. 上一条消息是否存在且与当前消息来自同一用户
        // 2. 下一条消息不存在或与当前消息来自不同用户
        // 如果满足这两个条件，则当前消息是该用户连续消息序列的最后一条，应显示头像。

        // 简化判断：
        // 只有当“下一条消息不存在”或“下一条消息的用户ID与当前消息的用户ID不同”时，才考虑显示头像。
        // 同时，还要确保“上一条消息存在且与当前消息来自同一用户”，这是为了确保不是第一条消息就显示。
        // 原始问题描述：
        // 1. The previous message belongs to my user (前提条件，但原文是"belongs to my user", 似乎是指当前用户)
        // 2. If the user sent multiple messages in a row, the image will only appear on the last received one.

        // 让我们重新解读原始需求：
        // 1. 如果上一条消息属于“当前用户”（假设这里“my user”是指正在查看聊天的用户，但更合理是“当前消息的发送者”）
        // 2. 如果用户连续发送多条消息，图像只显示在最后一条。

        // 基于提供的答案和常见聊天UI模式，更通用的理解是：
        // 如果当前消息是某个用户连续发送消息序列的“最后一条”，则显示头像。
        // 这意味着：
        //   a. 如果没有下一条消息，则当前消息是最后一条，显示头像。
        //   b. 如果有下一条消息，但下一条消息的发送者与当前消息不同，则当前消息是序列的最后一条，显示头像。
        //   c. 如果有下一条消息，且下一条消息的发送者与当前消息相同，则当前消息不是序列的最后一条，不显示头像。

        // 让我们采用答案中的逻辑，它更直接地实现了“最后一条”的判断：
        // 如果没有下一条消息，或者下一条消息的用户ID与当前消息的用户ID不同，则显示头像。
        // 此外，为了避免在每条消息序列的开头都显示头像（当用户第一次发送消息或前一条是不同用户时），
        // 还需要一个条件：只有当上一条消息与当前消息来自同一用户时，或者当前消息是第一条消息时，才需要考虑这个“最后一条”的判断。
        // 但原始答案的逻辑更简洁，它不关心“第一条”，只关心“最后一条”。
        // 原始答案的逻辑：
        // 1. 如果没有上一条消息，或者上一条消息来自不同用户，则不显示头像。
        // 2. 否则（即上一条消息来自同一用户），如果：
        //    a. 没有下一条消息，或者
        //    b. 下一条消息来自不同用户
        //    则显示头像。
        // 3. 其他情况（即上一条和下一条都来自同一用户），不显示头像。

        if (!previousMessage || previousMessage.user_id !== item.user_id) {
            // 如果没有上一条消息，或者上一条消息的发送者与当前消息不同
            // 那么当前消息是该用户新序列的开始，不显示头像
            return false;
        }

        // 如果上一条消息的发送者与当前消息相同
        // 此时，我们需要判断当前消息是否是这个连续序列的最后一条
        if (!nextMessage || nextMessage.user_id !== item.user_id) {
            // 如果没有下一条消息，或者下一条消息的发送者与当前消息不同
            // 则当前消息是这个连续序列的最后一条，显示头像
            return true;
        }

        // 其他情况（上一条和下一条都来自同一用户），不显示头像
        return false;
    };

    return (
        <View style={styles.messageContainer}>
            {showUserImage() && (
                <Image 
                    source={{ uri: getUserAvatarUrl(item.user_id) }} 
                    style={styles.avatar} 
                />
            )}
            <View style={styles.messageBodyContainer}>
                <Text style={styles.messageText}>{item.messageBody}</Text>
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    messageContainer: {
        flexDirection: 'row',
        alignItems: 'flex-end', // 让头像和消息底部对齐
        marginVertical: 4,
        paddingHorizontal: 10,
        // 根据消息发送者调整对齐方式，这里仅为示例
        // width: '60%', // 示例宽度，实际应用中可能需要更灵活的布局
    },
    avatar: {
        width: 30,
        height: 30,
        borderRadius: 15,
        marginRight: 8,
        backgroundColor: '#ccc', // 占位符颜色
    },
    messageBodyContainer: {
        backgroundColor: '#e0e0e0',
        borderRadius: 10,
        padding: 8,
        maxWidth: '70%', // 限制消息气泡最大宽度
    },
    messageText: {
        fontSize: 16,
        color: '#333',
    },
});

export default MessageCard;