如何在本机消息传递应用程序中的群聊消息中显示发件人姓名，如果他发送下一条消息则不显示他的名字？

Question

我在 React Native 中有消息传递应用程序，它包含群组消息传递。现在我想在特定消息上显示发件人的姓名。我已经在消息中显示了发件人的姓名。但我想做的是，当他的多条消息连续出现时，只在第一条消息上显示他的名字。

这是屏幕截图。

请看第一张图片中的所有消息上都显示了姓名。

现在想这样做所以只在第一条消息中显示他的名字。

在flatlist里面我以前显示的名字是这样的，

`<Text numberOfLines={1} style={{
                              flexDirection: 'row',alignItems:'center',textAlignVertical:'center',
                              flexWrap: 'wrap', color: 'rgb(44,88,157)', fontWeight: '600',
                              paddingLeft: 0,
                              justifyContent: 'flex-start',
                            }}
                            >{item.sender_user_id.nick_name
                              }</Text>`

Answer 1

制作一个 Message 具有布尔值的组件属性 showName

renderMessage(showName = true, name, body) {
    return <Message showName={showName} name={name} body={body}/>
}

要在几条消息的第一条消息上显示姓名：

在您的消息呈现中，使用一个变量来跟踪最后一条消息的发件人 ID。
当最后一个 ID 未定义或不同时，将 showName 设置为真。

例子

renderMessages(messages) {
    let lastSenderId = undefined;

    messages.map(message => {
        let showName = !lastSenderId || message.senderId !== lastSenderId;
        lastSenderId = message.senderId;
        renderMessage(showName, message.name, message.body)
    });
}

要在几条消息的最后一条显示姓名：

如果没有下一条消息，显示姓名
如果下一条消息有不同的发件人，显示姓名

例子

renderMessages(messages) {
    const lastIndex = messages.length - 1;
    messages.map((message, i) => {
        let showName = false;
        if(i === lastIndex) {
            showName = true;
        }
        else {
            const nextName = messages[i+1].name;
            if(message.name !== nextName) {
                showName = true;
            }
        }
        renderMessage(showName, message.name, message.body)
    });
}

如何在本机消息传递应用程序中的群聊消息中显示发件人姓名，如果他发送下一条消息则不显示他的名字？

how to display Sender name on Message for Group chat in react native messaging app and dont show his name if next messages sent by him?

reactjs

react-native

react-native-android

react-native-ios