Как сделать так, чтобы только один пользователь находился слева, а остальные - в приложении чата с помощью response-native-gifted-chat - PullRequest
Новая
       15

Как сделать так, чтобы только один пользователь находился слева, а остальные - в приложении чата с помощью response-native-gifted-chat

0 голосов
/ 05 июня 2019

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

Комментарии владельца комнаты должны быть слева на экране чата, а комментарии других - справа.

Пример: комментарии с идентификатором пользователя 1 должны быть слева в чате, комментарии с идентификатором пользователя 2 ~ 100 должны быть справа в чате.

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

Я уже пытался разработать renderMessage и render, как показано ниже. 

import React, { Component } from 'react';
import { Image, ImageBackground, Text, Linking, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
import { Body, Container, Header, Icon, Left, Right, Thumbnail } from "native-base";
import { Button, List } from 'react-native-paper';
import { GiftedChat, Composer } from 'react-native-gifted-chat';

export default class ChatScreen extends Component {
  messages = [
{
      _id: 4,
      text: <Text onPress={() => ( alert('Hello'))} style={{ color: 'red' }}>Sample</Text>,
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
      user: {
        _id: 1,
        name: 'Chat owner'
      }
    },
    {
      _id: 3,
      text: <Text onPress={() => ( alert('Hello'))} style={{ color: 'red' }}>Sample</Text>,
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
      system: true,
      // Any additional custom parameters are passed through
    },
    {
      _id: 2,
      text: <Text onPress={() => { alert('hello')}} style={{ color: 'red' }}>Sample</Text>,
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
      system: true,
      // Any additional custom parameters are passed through
    },
    {
      _id: 1,
      text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
      createdAt: new Date(),
      user: {
        _id: 2,
        name: 'Chat user',
      },
    },
  ];

  renderComposer = props => {
    return (
      <View style={{flexDirection: 'row'}}>
        <Icon type='SimpleLineIcons' name='paper-clip' style={{ fontSize: 20, justifyContent: 'center', paddingTop: 10, paddingLeft: 8 }}/>
        <Composer {...props} />
        <Button>Submit</Button>
      </View>
    );
  };

  renderMessage = props => {
    return (
      <View style={{ paddingLeft: 10 }} >
        <Thumbnail small source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }}/>
      </View>
    );
  };

  onSend = (messages = []) => {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }))
  };

  render() {
    return (
      <Container>
        <GiftedChat
          renderComposer={this.renderComposer}
          renderMessage={this.renderMessage}
          onSend={(messages) => this.onSend(messages)}
          messages={this.messages}
          placeholder=''
          loadEarlier={true}
          showAvatarForEveryMessage={true}
          renderUsernameOnMessage={true}
        />
      </Container>
    )
  }
}

Теперь все сообщения находятся в левой части чата, как показано ниже.

https://gyazo.com/bfe08a8f648f3d4648a8d6d26556b116

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

renderMessage = props => {
    paddingLeft = (userId === 1 ? '10' : '200') // I will add this code
    return (
      <View style={{ paddingLeft: paddingLeft }} >
        <Thumbnail small source={require('../../assets/thumbnail.png')} style={{ justifyContent: 'center' }}/>
      </View>
    );
  };

1 Ответ

0 голосов
/ 16 июля 2019

попробуйте добавить пользователя, который пишет, в giftedChat: 

    <GiftedChat
      isAnimated
      messages={this.props.messages}
      onSend={messages => this.onSend(messages)}
      user={{
           _id: '200',
           name: 'faisal',
      }}
      />

Каждое сообщение с _id: '200' пользователя будет отображаться справа.

пример сообщенияэто будет отображаться на правой стороне: 

    {
    _id: 5,
     text: 'Hello World?',
     createdAt: new Date(),
     user: {
        _id: '200',
        name: 'fasial'
      },
     },
...