优化React Native聊天界面：用户头像的条件性显示策略

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

// 假设 root.mapStore.activeChatMessages 存储了所有聊天消息
// 并且消息数组是按时间顺序排序的

const ChatScreen = observer(() => {
    // ... 其他组件逻辑

    return (
        <FlatList
            vertical={true}
            data={root.mapStore.activeChatMessages}
            keyExtractor={item => item.provisionalId.toString()} // 确保key唯一
            renderItem={({ item, index }) => (
                <MessageCard
                    item={item} // 当前消息对象
                    index={index} // 当前消息的索引
                    messages={root.mapStore.activeChatMessages} // 传递整个消息数组以便访问相邻消息
                />
            )}
        />
    );
});

export default ChatScreen;

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

const MessageCard = observer((props) => {
    const { item, index, messages } = props; // 接收完整的消息数组

    /**
     * 判断是否应该显示用户头像的逻辑函数
     * @returns {boolean} 如果应该显示头像则返回 true，否则返回 false
     */
    const shouldShowUserImage = () => {
        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;
        }

        // 如果以上两个条件都不满足，说明：
        // 1. previousMessage 存在且 user_id 相同 (当前消息不是序列的第一条)
        // 2. nextMessage 存在且 user_id 相同 (当前消息不是序列的最后一条)
        // 这意味着当前消息是同一用户连续发送序列中的中间消息，根据规则不显示头像。
        return false;
    };

    return (
        <View style={styles.messageContainer}>
            {shouldShowUserImage() && (
                <Image
                    source={{ uri: item.userAvatarUrl || 'default_avatar_url' }} // 替换为实际头像URL
                    style={styles.userAvatar}
                />
            )}
            <View style={styles.messageBody}>
                <Text>{item.messageBody}</Text>
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    messageContainer: {
        flexDirection: 'row',
        alignItems: 'flex-end', // 根据实际布局调整
        marginBottom: 8,
        // 其他样式
    },
    userAvatar: {
        width: 30,
        height: 30,
        borderRadius: 15,
        marginRight: 8,
        backgroundColor: '#ccc', // 占位符颜色
    },
    messageBody: {
        flex: 1,
        backgroundColor: '#e0e0e0', // 消息气泡背景
        padding: 10,
        borderRadius: 10,
        // 其他样式
    }
});

export default MessageCard;