时间戳

首页 > 解决方案 > React native flatlist - 区分发送和接收的消息

react-native - React native flatlist - 区分发送和接收的消息

问题描述

我目前正在尝试实现我的聊天屏幕，我试图区分收到的消息和发送的消息。

我创建了一个名为 MessageBubble 的组件，如果消息是由当前用户发送的，它会使用一个名为 mine 的道具。

使用下面的实现，当我在 2 个不同的设备上打开聊天时，它们都有正确的消息（由当前用户发送），其中一个应该在左侧。

这是我的平面列表代码：

     <FlatList
        inverted
        data={message.Messages}
        keyExtractor={(message) => message.id.toString()}
        renderItem={({item,index})=>(
        message.Messages.map(x=>x.senderId) === user.id?
        <MessageBubble mine text= {item.message} />:<MessageBubble text={item.message} />
        )}
        />
``
user.id ----> is the id of the current user


When i console.log(message.Messages.map(x=>x.senderId)), i get an array with all the senderIds
```react
    Array [
    43,
    43,
    43,
    43,
    ]

当我 console.log(message.Messages) 时，我得到以下信息：

    Array [
    Object {
    "conversationId": 15,
    "createdAt": "2020-12-14T11:38:41.471Z",
    "id": 54,
    "message": "Hey user1",
    "receiverId": 47,
    "senderId": 43,
    "updatedAt": "2020-12-14T11:38:41.471Z",
    },
    Object {
    "conversationId": 15,
    "createdAt": "2020-12-14T10:28:54.685Z",
    "id": 52,
    "message": "Test12345",
    "receiverId": 47,
    "senderId": 43,
    "updatedAt": "2020-12-14T10:28:54.685Z",
    },
    ]

标签： react-native

解决方案

试试这个方法

renderItem={({item,index})=>(
    <MessageBubble 
       text={item.message} 
       mine={item.senderId === user.id} // this way 
    />
)}

推荐阅读