如何使用 react-native-gifted-chat 在聊天应用程序中仅让一个用户位于左侧而其他用户位于右侧

Question

我正在开发一个移动聊天应用程序，这就像群聊。

房主的评论应该在聊天界面的左侧，其他人的评论应该在聊天界面的右侧。

例子：用户id 1的评论应该在聊天的左边，用户id 2~100的评论应该在聊天的右边

我想我应该使用 renderMessage 来自定义聊天消息 UI。但是我不知道如何有效地使用它。

我已经尝试开发 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' 中的消息中获取用户 ID。如果我知道，我会开发如下代码。

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>
    );
  };

Answer 1

尝试将正在写作的用户添加到 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'
      },
     },

Answer 2

renderMessages = (msg) => {
let message = msg.currentMessage
var ColorCode = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
var date = moment(message.timestamp)
.utcOffset('+05:30')
.format('hh:mm A');
console.log("single message", message)
return (
  <View>
    {/* <Text>{item.message}</Text> */}
    {message.user.user_id === this.state.login_response.id ?
      <View style={styles.left_bubble}>
        {/* <Text>{message.user.name}</Text> */}
        <Text>{message.text}</Text>
        <Text style={{alignSelf:'flex-end',color:'#8c8c8c'}}>{date}</Text>
      </View>
      :
      <View style={styles.rightBubble}>
        <Text style={{ color: ColorCode }}>{message.user.name}</Text>
        <Text style={{ padding: 2 }}>{message.text}</Text>
        <Text style={{fontSize:TextFormatter.normalize(12), alignSelf:'flex-end',color:'#8c8c8c'}}>{date}</Text>
      </View>
    }
  </View>
)}

 <GiftedChat
      messages={this.state.messages}
      onSend={Fire.shared.send}
      user={this.user}
      renderDay={this.renderDay}
      renderMessage={(message) => this.renderMessages(message)}

    />

Answer 3

确保您没有将整数 (parseInt()) 值传递给 _id 字段。只需将任何整数 ID 字符串化即可。消息中的示例..

{
    _id: id.toString(),
    text: message,
    createdAt: new Date(),
    user: { _id: userId.toString(), name: name }
}

然后在 render()

isAnimated
messages={messages}
onSend={newMessages => this._onSend(newMessages)}
user={{
    _id: id.toString(),
    name: name
}}

如何使用 react-native-gifted-chat 在聊天应用程序中仅让一个用户位于左侧而其他用户位于右侧

How to make only one user on the left side and others on the right side in chat app with react-native-gifted-chat

react-native

react-native-gifted-chat