Реагировать на выравнивание сообщений в чате

Я не могу заставить сообщения двух пользователей выравниваться по левой и правой стороне, вытягивая их из состояния. Все идут по левой стороне. Если я попытаюсь опубликовать новое сообщение, это сообщение будет отображаться с правой стороны, как и ожидалось, но не при извлечении их из состояния.

Пример кода

    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 сообщения, оба с разными идентификаторами пользователей, но сообщения отображаются слева. Я также сохранил сообщения в бэкэнде, и, хотя написание новых сообщений не является проблемой, вытащить их из бэкэнда и отобразить.

Я также изменил свойство renderMessage в giftedChat, но безрезультатно. Я использую сервер, который принимает только групповые чаты, может быть проблема в этом? Любые идеи? Спасибо


react-native reactjs alignment messagebox react-native-gifted-chat
person sid0972    schedule 06.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я очень рад ответить на этот вопрос для правильного выравнивания одно сообщение справа и одно сообщение слева вы должны использовать это

  1. использовать рендербаббл

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

  2. в функции renderBubble проверьте это условие (идентификатор отправителя или текущий идентификатор пользователя сообщения)

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

<Bubble
         {...props}
         wrapperStyle={{
           left: {
             backgroundColor: '#f0f0f0',
           },
         }}
       />
}

что все в этом коде мы различаем сообщение в левой или правой части

person Pushpendra Chouhan    schedule 06.01.2021
comment
привет, спасибо за ответ, я попробовал ваше решение, но оно не сработало. Я также пытался использовать ‹Bubble› без каких-либо условий, но это все равно не сработало (см. эту ссылку amanhimself.dev/blog/chat-app-with-react-native-part-4). Есть ли что-то, что я делаю неправильно? - person sid0972; 06.01.2021
comment
Поигравшись с ‹Bubble›, я нашел свойство Position, которое позволило мне выровнять сообщения. Спасибо - person sid0972; 06.01.2021
comment
дорогой, вы должны проверить идентификатор обоих сообщений, если идентификатор равен, то правый пузырь будет отображаться с правой стороны .. это покажет, что правильные сообщения принадлежат вам, если идентификатор не будет равен, то он будет слева попробуйте это, если вы все еще сталкиваетесь с проблемой, вы можете поделиться своим кодом на выставке закусок здесь: url = snack.expo.io< /а> - person Pushpendra Chouhan; 07.01.2021