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

【问题标题】：How to display chat messages on left and right in react-native-gifted-chat如何在 react-native-gifted-chat 中左右显示聊天消息
【发布时间】：2021-06-03 12:43:41
【问题描述】：

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

  {
    "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
    messages={messages}
    onSend={messages => onSend(messages)}
/>

因为响应没有用户头像我也想从自定义 url 显示头像但这也不起作用我第一次使用有天赋的聊天有人可以帮我怎么做吗？或任何建议

提前致谢

【问题讨论】：

标签： reactjs react-native react-native-android chat react-native-gifted-chat

【解决方案1】：

我找到了解决方案我将消息的格式更改为有天赋的聊天所需的格式，除非我们将回复修改为有天赋的聊天所需的格式，否则它将无法正常工作这就是我所做的

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}
/>

【讨论】：