使用Firebase数据React Native显示FlatList

时间:2018-03-13 15:26:03

标签: javascript reactjs react-native

尝试让FlatList显示来自Firebase的数据。 安装是正确的,我可以在我的控制台中看到日期,但不知道如何可视化它。

我想在列表中看到'recipeOne''recipeTwo''recipeThree'。 我确信我遗漏了一些基本的东西。

这是代码

...

import {DataConfig} from '../data/DataConfig';
const firebaseApp = firebase.initializeApp(DataConfig);

globalTexts = require('../styles/Texts.js');
globalColors = require('../styles/Colors.js');

export default class ListSort extends Component {
   constructor(props) {
      super(props);
      this.dataItem = firebaseApp.database().ref('recipes');
      this.state = {
         item: []
      }
   };

   componentWillMount() {
      this._createItemList();
   };

   _createItemList = (dataItem) => {
      this.dataItem.on('value', (snapshot) => {
         var itemList = [];
         snapshot.forEach((doc) => {
            itemList.push({
               key:doc.key,
               itemType: doc.toJSON()
            });
            this.setState({item: itemList});
            console.log(this.state.item);
         })
      })
   };

   render() {
      return (
         <View style={styles.container}>
            <FlatList
               data={this.state.item}
               renderItem={({item, index}) => (
                  <View style={styles.cell}>
                     <Text style={globalText.btnFlatPrimary}>{item.recipes}</Text>
                  </View>
               )}
            />
         </View>
      )
   }
}

这是数据。 Firebase中的规则设置为read:仅true。

{
"recipes": {
    "recipeOne": {...
    "recipeTwo": {...
    "recipeThree": {...
    }
}

0 个答案:

没有答案