如何在 react-native-gifted-chat 中左右显示聊天消息

Question

我必须先加载以前的聊天消息，然后我收到了这样的消息回复

  {
    "id": "8102f902-d54b-457a-823e-13d3sssssds",
    "buyerID": "4b358200-4da0-46a0-ad8b-838888888848",
    "sellerID": "cf82474c-277b-483e-88ce-77777777777",
    "text": "Hello, I would like to learn how to contour my cheeks.",
    "messageType": "TEXT",
    "createdAt": "2021-01-02T22:51:11.220Z",
    "senderType": "BUYER",
    "updatedAt": "2021-01-02T22:51:11.220Z"
  },
  {
    "id": "08a8e684-2279-4cc1-9d2d-d5e4ebd9210a",
    "buyerID": "4b358200-4da0-46a0-ad8b-838888888848",
    "sellerID": "cf82474c-277b-483e-88ce-77777777777",
    "text": "Sure how can I help contour?",
    "messageType": "TEXT",
    "createdAt": "2021-01-02T22:56:49.019Z",
    "senderType": "SELLER",
    "updatedAt": "2021-01-02T22:56:49.019Z"
  },
  {
    "id": "67d75630-245a-46d4-9d33-8812d1e48b68",
    "buyerID": "4b358200-4da0-46a0-ad8b-838888888848",
    "sellerID": "cf82474c-277b-483e-88ce-77777777777",
    "text": "Yo tell me how I can help",
    "messageType": "TEXT",
    "createdAt": "2021-01-02T23:04:39.893Z",
    "senderType": "SELLER",
    "updatedAt": "2021-01-02T23:04:39.893Z"
  },

但是所有消息都显示在屏幕左侧，但我希望买家消息显示在右侧我有像这样的 giftedChat 组件

<GiftedChat
    messages={messages}
    onSend={messages => onSend(messages)}
/>

因为响应没有用户头像我也想显示自定义头像 url 但这也不起作用我是第一次使用 gifted chat 谁能帮我怎么做？或任何建议

提前致谢

Answer 1

我找到了解决方法我将消息的格式更改为 gifted chat 所需的格式在我们将响应修改为 gifted chat 所需的格式之前它不会正常工作这就是我所做的

let filteredChatMessages = yourMessages.map((chatMessage) => {
    let modifiedMessages = {
        _id: chatMessage.user_id,
        text: chatMessage.text,// or chatMessage.message
        createdAt: chatMessage.createdAt,
        user: {
            _id: chatMessage.id
            avatar: chatMesssage.user_img_url
        }
    };
    return modifiedMessages;
});

console.log(filteredChatMessage);

然后渲染气泡

// Render bubble
const renderBubble = props => {

    const message_sender_id = props.currentMessage.user._id;

    return (
        <Bubble
            {...props}
            position={message_sender_id == currentLoggeduser ? 'right' : 'left'}
            textStyle={{
                right: {
                    color: COLORS.white,
                    fontSize: SIZES.s3
                },
                left: {
                    fontSize: SIZES.s3,
                },

            }}
            wrapperStyle={{
                right: {
                    backgroundColor: COLORS.appViolet,
                    marginRight: 5,
                    marginVertical: 5
                },
                left: {
                    marginVertical: 5
                },
            }}
        />
    );
};

最后呈现您的天才聊天组件

<GiftedChat
    messages={messages}
    onSend={messages => onSend(messages)}
    renderBubble={renderBubble}
    showUserAvatar={true}
    scrollToBottom={true}
    scrollToBottomComponent={renderScrollToBottom}
    text={textMessage}
    onInputTextChanged={text => setTextMessage(text)}
    inverted={false}
/>

如何在 react-native-gifted-chat 中左右显示聊天消息

How to display chat messages on left and right in react-native-gifted-chat

reactjs

react-native

react-native-android

chat

react-native-gifted-chat