如何显示对话，用户名并查看用户之间的聊天记录？

Question

我一直在试图推理出它，但是它没有出现在我身上。我正在使用React Native，React Native有天赋的聊天和AWSAppSync创建一个简单的聊天应用程序。

我正在尝试显示两个用户之间的对话，当我与一个用户聊天时，我想显示我以前通过AWS Cognito进行注册的用户名，并且希望能够看到聊天记录/保存用户之间的消息。对于后端，我使用的APi是GraphQL（AppSync）。

ConversationListScreen代码

import { FlatList } from 'react-native';
import { ListItem } from 'react-native-elements'

export const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },

]

class ConvoScreen extends Component {

goToOtherScreen(Chat){
  this.props.navigation.navigate('Chat');
}

keyExtractor = (_item, index) => index.toString()

renderItem = ({ item }) => (

  <ListItem
    title={item.name}
    subtitle={item.subtitle}
    leftAvatar={{ source: { uri: item.avatar_url } }}
    bottomDivider
    chevron
    onPress={() => this.goToOtherScreen(item.Chat)}
  />
)

render() {
  return(
    <FlatList
      keyExtractor={this.keyExtractor}
      data={list}
      renderItem={this.renderItem}

    />
  )
}
}

export default ConvoScreen;

ChatScreen.js

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

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

  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'React Native',
            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}
        onSend={messages => this.onSend(messages)}
        user={{
          _id: 1,

        }}
      />
    )
  }
}

export default ChatScreen;