2

我在 UI 和后端使用 react-native-gifted-chat，我使用 AWSAppSync/GraphQL 来存储用户数据。我不太确定如何在我的 ChatApp 中显示发件人的用户名，并且需要此功能进行群聊。到目前为止，这是我的代码。

import React from 'react'
import { GiftedChat } from 'react-native-gifted-chat'



class ChatScreen extends React.Component {
  state = {
    messages: [],
    username: ''


  }

  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 0,
            name: 'Default',
            avatar: 'https://placeimg.com/140/140/any',

          },


        },
      ],
    })
  }

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

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        renderUsernameOnMessage={true}
        onSend={messages => this.onSend(messages)}
        user={this.username}


      />
    )
  }
}

export default ChatScreen;
4

2 回答 2

2

你试过这个吗？

 <GiftedChat
        messages={this.state.messages}
        renderUsernameOnMessage={true}
        onSend={messages => this.onSend(messages)}
        user={this.state.username}
 />
于 2019-12-05T17:18:53.393 回答
1

在 react native 有天赋的聊天user中必须是包含键的对象_id，name并且avatar. _id将帮助它将发送者和接收者分开。所以是的，您必须使用这些属性设置用户。它不仅允许username。

这样做的简单方法是首先从服务器获取当前用户信息并将其存储到 asyncStorage 的 redux 中。例如，我正在从 firebase 获取当前用户，如下所示：

export const getAccountInfo = () => {
  return async dispatch => {
    const cu = auth().currentUser;
    const user = await firestore().collection('users').doc(cu.uid).get();
    dispatch({
      type: Types.INFO_FETCHED,
      data: user.data()
    });
  };
};

现在，在我的聊天屏幕中，我将用户设置如下：

<GiftedChat
  ...
  ...
  user={{
    _id: this.props.account?.user?.uid,
    name: this.props.account?.data?.fullName,
    avatar: this.props.account?.data?.avatar
  }}
/>
于 2019-12-05T17:31:49.597 回答