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

AI 图像编辑器

使用文本提示编辑、变换和增强照片

46

查看详情

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;