Как отобразить разговор, имя пользователя и посмотреть историю чата между пользователями? - PullRequest
Новая
       18

Как отобразить разговор, имя пользователя и посмотреть историю чата между пользователями?

0 голосов
/ 10 октября 2019

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