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

Question

如果 2 个用户正在使用该应用程序，则消息将显示在屏幕左侧。无法区分它们（发送者谁发送了什么消息），只有在使用我们自己的 REST Api Call 来加载时才会发生，

但是，当当时发送一条新消息时，消息将分别显示发送方和接收方格式，而当我当时使用 twillio 默认 getMessages 方法时，另一种情况也不会发生错误。

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

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

请在上面找到截图供您参考。任何知道如何解决此问题的人或任何建议都欢迎。

Answer 1

尝试将正在写作的用户添加到giftedChat：

 <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'
  },
},

Answer 2

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.

我希望它会帮助你。如果有任何疑问，请告诉我。