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

Question

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

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

通过下面的实现，当我在 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",
    },
    ]

Answer 1

试试这个方法

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

Answer 2

您错误地关闭了括号。 message.Messages.map(x=>x.senderId) === user.id? 这意味着您遍历了 messages 数组，map 返回了一个新数组，并且您检查了这个新数组是否等于 user.id，这总是错误的。