Question

如果有2位用户在使用该应用，则消息将显示在屏幕左侧。无法区分它们（发送消息的发件人），只有在使用我们自己的REST Api调用进行加载时，这种情况才会发生

但是，当那时发送一封新消息时，消息将分别显示发送者和接收者格式，而当我当时使用twillio默认的getMessages方法时，还会出现另一种情况。

Twilio方法可获取两个用户的先前消息：

this.channel.getMessages(0).then((messages) => {
    console.log("getMessages" + messages);
    this.handleBatch(messages);
});

请在上面找到屏幕截图，以供参考。任何人都知道如何解决此问题，也欢迎任何建议。

Answer 1

react-native-gifted-chat使用用户道具区分消息，该道具指定用户发送消息，所以你必须给用户道具

    <GiftedChat
                            messages={this.state.messages}
                            onSend={this.handleNewMessage.bind(this)}
                            user={{
                                _id: your user id
                                name: users name,
                                avatar: users image 
                            }} 
/>

如果愿意，姓名和头像可用于在优闲聊天中显示姓名或图像

和onSend事件将此用户发送给twillio的文本为

handleNewMessage = (message = {}) => {

            this.channel.sendMessage( message[0].text, message[0].user)
            .catch(error => console.error(error));
    }

现在在您的getMessages

this.channel.getMessages(0).then((messages) => {
    console.log("getMessages" + messages);
    this.handleBatch(messages);
});

在将优待聊天更改为希望聊天的消息格式之前仅举例来说，我使用状态来设置消息

handleBatch= (message) => {
        const messageData = this.formatMessage(message);
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, messageData),
        }));
    }



 formatMessage(message) {

            return {
                _id: message.sid, // or your own unique id
                text: message.body,
                user: message.attributes, // here you can get your user parameters in message attributes which we send to identify user
                createdAt: message.timestamp,
            };
        }

// change above conditions as you get response by twillio.

我希望它将对您有所帮助。如果有任何疑问让我知道。

Answer 2

尝试将正在书写的用户添加到有礼功能的聊天室中：

 <GiftedChat
    isAnimated
    messages={this.props.messages}
    onSend={messages => this.onSend(messages)}
    user={{
        _id: 'sarathy',
        name: 'Minecraft',
    }}
/>

每条包含用户_id: 'sarathy'的消息都将显示在右侧。

将在右侧显示的消息示例：

{
  _id: 3,
  text: 'How r u?',
  createdAt: new Date(),
  user: {
    _id: 'sarathy',
    name: 'React Native'
  },
},

消息仅显示在一侧（屏幕的左侧）-react-native-gifted-chat

2 个答案: