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

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

// 假设 root.mapStore.activeChatMessages 是一个MobX observable数组
// 实际应用中，您可能从其他地方获取消息数据
const root = {
    mapStore: {
        activeChatMessages: [
            { provisionalId: '1', user_id: 'userA', messageBody: 'Hello' },
            { provisionalId: '2', user_id: 'userA', messageBody: 'How are you?' },
            { provisionalId: '3', user_id: 'userB', messageBody: 'I am fine, thanks!' },
            { provisionalId: '4', user_id: 'userA', messageBody: 'Great!' },
            { provisionalId: '5', user_id: 'userA', messageBody: 'See you later.' },
            { provisionalId: '6', user_id: 'userC', messageBody: 'Bye!' },
        ],
    },
};

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

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 defaultUserImage = require('./assets/default_avatar.png'); 

    const showUserImage = () => {
        // 获取前一条和后一条消息
        const previousMessage = messages[index - 1];
        const nextMessage = messages[index + 1];

        // 规则1：如果当前消息是列表中的第一条，或者前一条消息与当前消息不属于同一用户，
        // 那么当前消息不可能是连续消息的中间或末尾，因此不显示头像。
        // （或者说，如果当前消息是用户发送的第一个消息块的开头，也不显示头像，因为头像会显示在连续消息的最后一条）
        // 
        // 修正：我们只关心当前消息是否是“连续消息块的末尾”。
        // 因此，如果前一条消息不存在或者与当前消息的发送者不同，那么当前消息是新一个消息块的开始，
        // 此时不显示头像（因为头像会显示在块的末尾）。
        if (!previousMessage || previousMessage.user_id !== item.user_id) {
            return false;
        }

        // 规则2：如果下一条消息不存在（即当前消息是最后一条消息），
        // 或者下一条消息与当前消息不属于同一用户，
        // 那么当前消息就是该用户连续发送消息的最后一条，此时显示头像。
        if (!nextMessage || nextMessage.user_id !== item.user_id) {
            return true;
        }

        // 否则，当前消息是该用户连续消息块的中间部分，不显示头像。
        return false;
    };

    return (
        <View style={styles.messageContainer}>
            {showUserImage() && (
                <Image source={defaultUserImage} style={styles.userImage} />
            )}
            <View style={styles.messageBodyContainer}>
                <Text style={styles.messageText}>{item.messageBody}</Text>
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    messageContainer: {
        flexDirection: 'row',
        alignItems: 'flex-end', // 使头像和消息体底部对齐
        marginBottom: 8,
        // 根据消息发送者调整对齐方式，这里仅作示例
        // width: '60%', 
        // alignSelf: 'flex-start' // 假设是接收到的消息
    },
    userImage: {
        width: 30,
        height: 30,
        borderRadius: 15,
        marginRight: 8,
        backgroundColor: '#ccc', // 占位符颜色
    },
    messageBodyContainer: {
        backgroundColor: '#e0e0e0',
        borderRadius: 10,
        padding: 10,
        maxWidth: '70%', // 限制消息宽度
    },
    messageText: {
        fontSize: 16,
    },
});

export default MessageCard;