React Native聊天UI：优化消息序列中用户头像显示逻辑

import React from 'react';
import { FlatList } from 'react-native';
import { observer } from 'mobx-react-lite'; // 假设使用MobX状态管理
import MessageCard from './MessageCard'; // 引入消息卡片组件

const ChatScreen = observer(() => {
    // 假设 root.mapStore.activeChatMessages 是存储消息的MobX observable数组
    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} />
            }
        />
    );
});

export default ChatScreen;

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

const MessageCard = observer(({ item, index, messages }) => {
    const showUserImage = () => {
        // 获取上一条和下一条消息
        const previousMessage = messages[index - 1];
        const nextMessage = messages[index + 1];

        // 条件1：如果当前消息是该用户发送的第一条消息，或者前一条消息来自不同用户
        // 此时不显示头像，因为我们的规则是“如果用户连续发送多条消息，头像仅显示在最后一条消息旁边”
        // 所以，如果这是序列的开始，我们不显示。
        if (!previousMessage || previousMessage.user_id !== item.user_id) {
            // 但如果这也是该用户发送的唯一一条消息，或者下一条消息来自不同用户，则显示。
            if (!nextMessage || nextMessage.user_id !== item.user_id) {
                return true; // 孤立消息或序列的结束
            }
            return false; // 序列的开始，后面还有该用户的消息
        }

        // 条件2：如果前一条消息与当前消息来自同一用户
        // 此时，我们只在当前消息是该用户连续发送的最后一条时显示头像。
        if (previousMessage.user_id === item.user_id) {
            // 如果没有下一条消息，或者下一条消息来自不同用户，则显示头像。
            if (!nextMessage || nextMessage.user_id !== item.user_id) {
                return true; // 序列的结束
            }
        }

        // 其他情况（即当前消息处于该用户连续发送消息的中间位置），不显示头像。
        return false;
    };

    return (
        <View style={styles.messageContainer}>
            {showUserImage() && (
                <Image 
                    source={{ uri: item.user_avatar_url || 'default_avatar.png' }} // 假设 item 中有用户头像URL
                    style={styles.userImage} 
                />
            )}
            <View style={styles.messageBubble}>
                <Text style={styles.messageText}>{item.messageBody}</Text>
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    messageContainer: {
        flexDirection: 'row',
        alignItems: 'flex-end', // 头像和消息底部对齐
        marginVertical: 4,
        paddingHorizontal: 10,
        // 根据消息发送者调整对齐方式，这里简化为左对齐
    },
    userImage: {
        width: 30,
        height: 30,
        borderRadius: 15,
        marginRight: 8,
        backgroundColor: '#ccc', // 默认背景色
    },
    messageBubble: {
        padding: 10,
        borderRadius: 15,
        backgroundColor: '#e0e0e0', // 示例消息气泡背景
        maxWidth: '70%',
    },
    messageText: {
        fontSize: 16,
        color: '#333',
    },
});

export default MessageCard;