Ошибка типа: undefined не является объектом (оценка '_this3.props.navigation.state.params') - PullRequest
Новая
       101

Ошибка типа: undefined не является объектом (оценка '_this3.props.navigation.state.params')

0 голосов
/ 25 апреля 2020

Я пытаюсь создать приложение для чата, например WhatsApp. Я построил Inbox. js ели. Это работает очень хорошо. Я могу получить пользователей из FireBase, я могу перечислить их. Затем я построил Чат. js. Но когда я пытаюсь go экран чата из папки входящих сообщений. Я получил эту ошибку. Мое приложение. js, Входящие. js и Чат. js ниже. Пожалуйста, помогите мне.

Вот Приложение. js

export default function App() {
  return (<AppNavigator />
  );
}

const AppSwitchNavigator = createSwitchNavigator({
  LoadingScreen: LoadingScreen,
  LoginScreen: LoginScreen,
  DashboardScreen: DashboardScreen,
  Inbox: Inbox,
  Chat: Chat,
  Profil: Profil
})

const AppNavigator = createAppContainer(AppSwitchNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Вот Входящие. js

export default class Inbox extends React.Component {
  state = {
    userList: []
  }

  componentWillMount() {
    firebase.database().ref().child('users').once('value', (snap) => {
      let userList = []
      snap.forEach((user) => {
        const { first_name, profile_picture, uid } = user.val()
        userList.push({ first_name, profile_picture, uid })
      })
      this.setState({ userList })
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ alignItems: 'center', justifyContent: 'center', width: width - 40, paddingBottom: 10 }}>
          <Text style={{ color: 'grey', fontWeight: 'bold', fontSize: 18 }}>Inbox</Text>
        </View>
        <FlatList
          data={this.state.userList}
          keyExtractor={(item, index) => item.first_name}
          renderItem={({ item }) =>
            <TouchableNativeFeedback onPress={() => this.props.navigation.navigate('Chat', { user: this.props.navigation.state.params.user, profile: item })} >
              <View style={{ flex: 1, backgroundColor: 'transparent', flexDirection: 'row', padding: 5, width: width }}>

                <Image style={{ height: 40, width: 40, borderRadius: 20 }}
                  source={{ uri: item.profile_picture }} />

                <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                  <Text style={{ color: 'grey', fontWeight: 'bold' }}>{item.first_name}</Text>
                </View>
              </View>
              <View style={{ width: width, height: 1, backgroundColor: 'darkgrey' }} />
            </TouchableNativeFeedback>
          } />
      </View>
    );
  }
}

Вот Чат. js

export default class Chat extends Component {
  state = {
    messages: [],
    user: this.props.navigation.state.params.user,
    profile: this.props.navigation.state.params.profile
  }

  componentWillMount() {
    const { user, profile } = this.state
    this.chatID = user.uid > profile.uid ? user.uid + '-' + profile.uid : profile.uid + '-' + user.uid
    this.watchChat()
  }

  watchChat = () => {
    firebase.database().ref('messages').child(this.chatID).on('value', snap => {
      let messages = []
      snap.forEach(messages => {
        messages.push(messages.val())
      })
      messages.reverse()
      this.setState({ messages })
    })
  }

  onSend = (messages) => {
    const { user, profile } = this.state
    relationMessage = {}
    firebase.database().ref('messages').child(this.chatID).push({
      ...message[0], createdAt: new Date().getTime(),
    })
  }

  render() {
    const { user, profile } = this.state
    const avatar = user.profile_picture
    return (
      <View style={{ flex: 1 }}>
        <GiftedChat
          messages={this.state.messages}
          user={{ _id: user.uid, avatar }}
          onSend={this.onSend()}
        />
      </View>
    )
  }
}
...