Firebase + React Native: как получить все данные

Итак, я хочу получить все эти данные в свой код, а затем отобразить их.

Firebase + React Native: как получить все данные

Я прочитал много других вопросов и тем, а также документацию по firebase, но до сих пор не понял, как это сделать правильно.

Итак, у меня сейчас есть эта база данных наверху и этот код внизу.

Но проблема в том, что он отображает только белый экран, и я не могу найти свою ошибку.

Как я могу это исправить?

import firebase from "react-native-firebase";
import _ from 'lodash';

export default class Messagesss extends React.Component {
  state = {
   loading: false,
   users: []
  };

  componentWillMount() {
   var allMessages = firebase.database().ref(`/users`);
   allMessages.once('value').then(snapshot => {
  this.setState({ users: snapshot.val(), loading:false })
})
}

 renderItem({item}) {
   return (
     <View style = {styles.contactContainer}>
      <View style = {styles.userRow}>
        <View style = {styles.userImage}>
          <Avatar
            width = {60}
            rounded
            source = {{
              uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Matterhorn_from_Domhütte_-_2.jpg/1200px-Matterhorn_from_Domhütte_-_2.jpg"
            }}
          />
        </View>
         <View>
          <View style = {styles.emailBackground}>
           <Text
             style = {styles.contact} >
             {item.email}
           </Text>
           </View>
           <Text
              style = {styles.message} >
              Da inne lauft öpis...
           </Text>
          </View>
         </View>
       </View>
     )
 }

 render() {
  if (this.state.loading) {
    return (
      <View style = {{alignItems: 'center', justifyContent: 'center', flex: 1}}>
        <ActivityIndicator size = "large" color = "dodgerblue" />
      </View>
    )
  }
  return (
    <View style = {styles.container}>
     <Header
       centerComponent = {{ text: 'Nachrichten', style: { color: '#FF0000', fontSize: 20, fontWeight: 'bold' } }}
       outerContainerStyles = {{ backgroundColor: '#ffffff' }}
     />
      <FlatList
        data = {this.state.users}
        renderItem = {this.renderItem}
        keyExtractor = {item => item.uid}
      />
    </View>
  );
}
}

Вы пытались отладить данные или console.info? Может быть, у вас есть данные, но стили где-то не так.

tuledev 30.11.2018 04:13

@anhtu Я пробовал данные console.info и обнаружил, что массив пуст. Но до сих пор не понимаю, почему он пустой.

DrueTrue 30.11.2018 13:03

Попробуйте отладить оператор once.

tuledev 03.12.2018 03:51
Интеграция Angular - Firebase Analytics
Интеграция Angular - Firebase Analytics
Узнайте, как настроить Firebase Analytics и отслеживать поведение пользователей в вашем приложении Angular.
1
3
669
0

Другие вопросы по теме