React 有天赋的聊天消息对齐

Question

我无法从两个用户那里获取消息以在左侧和右侧对齐，同时将它们从状态中拉出。他们都走在左边。如果我尝试发布一条新消息，该消息会按预期出现在右侧，但不会在将它们从状态中拉出时出现。

示例代码

    import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [messages, setMessages] = useState([
    {
    _id: 1,
    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
    createdAt: new Date(),
    user: {
      _id: 2,
      name: 'React Native',
    },
  },
  {
    _id: 2,
    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
    createdAt: new Date(),
    user: {
      _id: 3,
      name: 'React',
    },
  }
  ]);

  const onSend = (newMessage = []) => {
    setMessages(GiftedChat.append(messages, newMessage));
  };
  
  return (
    <GiftedChat
      messages={messages}
      onSend={newMessage => onSend(newMessage)}
      user={{
        _id: 1,
      }}
    />
  );
}

此示例包含 2 条消息，均具有不同的用户 ID，但消息显示在左侧。我还将消息保存在后端，虽然编写新消息不是问题，但将它们从后端拉出来并显示它们是。

我还修改了giftedChat的renderMessage属性，但无济于事。我正在使用仅接受群聊的服务器，这可能是问题吗？ 有任何想法吗？谢谢

Answer 1

很高兴回答这个问题 对于右对齐，右侧有一条消息，左侧有一条消息，您必须使用此

1. 使用渲染气泡

   <GiftedChat renderBubble={this.renderBubble}. 
               isLoadingEarlier={true}/>
   

2. 在 renderBubble 函数中，检查这个条件（发送者 id 或当前消息用户 id）

   currentMessage.user._id == this.state.senderData.id) {
         <Bubble
              {...props}
              wrapperStyle={{
                right: {
                  height: 200,
                  backgroundColor: 'blue',
                },
              }}
            />
       } else {
   
   <Bubble
            {...props}
            wrapperStyle={{
              left: {
                backgroundColor: '#f0f0f0',
              },
            }}
          />
   }
   

在这段代码中，我们区分左侧或右侧的消息