React Native 聊天应用：实现用户头像智能显示逻辑

const showUserImage = (item, index, activeChatMessages) => {
    const previousMessage = activeChatMessages[index - 1];
    const nextMessage = activeChatMessages[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;
};

import React from 'react';
import { View, Text, Image } from 'react-native';
import { observer } from 'mobx-react-lite'; // 假设你使用MobX

// 假设 root.mapStore.activeChatMessages 是全局可访问的MobX store
// 在实际应用中，你可能需要通过 Context 或 Props 传递它
const root = {
    mapStore: {
        activeChatMessages: [] // 实际数据应从外部传入或MobX store获取
    }
};

// 辅助函数，判断是否显示用户头像
const shouldDisplayUserImage = (item, index, messages) => {
    const previousMessage = messages[index - 1];
    const nextMessage = messages[index + 1];

    // 如果没有前一条消息，或者前一条消息的发送者与当前消息不同
    if (!previousMessage || previousMessage.user_id !== item.user_id) {
        return false;
    }

    // 如果没有后一条消息，或者后一条消息的发送者与当前消息不同
    if (!nextMessage || nextMessage.user_id !== item.user_id) {
        return true;
    }

    // 否则，当前消息处于同一用户连续发送消息的中间，不显示头像
    return false;
};

const MessageCard = observer((props) => {
    const { item, index } = props;
    // 假设 activeChatMessages 可以通过 props 传递，或者从 MobX store 访问
    const messages = root.mapStore.activeChatMessages; // 或者 props.messages

    return (
        <View style={{ width: '60%', flexDirection: 'row', alignItems: 'center' }}>
            {shouldDisplayUserImage(item, index, messages) && (
                <Image
                    source={{ uri: item.user_avatar_url || 'default_avatar_url' }} // 替换为实际的用户头像URL或默认图片
                    style={{ width: 30, height: 30, borderRadius: 15, marginRight: 8 }}
                />
            )}
            <View style={{ flexShrink: 1, backgroundColor: '#e0e0e0', padding: 10, borderRadius: 10 }}>
                <Text>{item.messageBody}</Text>
            </View>
        </View>
    );
});

export default MessageCard;

import React from 'react';
import { FlatList, View } from 'react-native';
import MessageCard from './MessageCard'; // 导入你的 MessageCard 组件
// 假设 root.mapStore 是你的 MobX store
import root from './yourMobxStore'; // 导入你的 MobX store

const ChatScreen = observer(() => { // 如果ChatScreen也依赖MobX状态，则使用observer
    return (
        <View style={{ flex: 1 }}>
            <FlatList
                vertical={true}
                data={root.mapStore.activeChatMessages}
                keyExtractor={item => item.provisionalId.toString()}
                renderItem={({ item, index }) => (
                    <MessageCard item={item} index={index} />
                )}
                // 可以添加 inverted 属性使列表从底部开始
                // inverted={true}
            />
        </View>
    );
});

export default ChatScreen;