反应天才聊天消息对齐

问题描述

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

示例代码

    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)',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 属性，但无济于事。我使用的服务器只接受群聊，这可能是问题吗？ 有任何想法吗？谢谢

解决方法

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

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

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