Question

嘿，希望您能完成我的第一个React Native应用程序的开发，因此我需要从Firebase获取数据，但问题是我的数据看起来像那样 {id : {name:"" , image:""}}在获取数据并将其存储为状态后，每行的ID是不同的。

那么我怎样才能把每一行都放在一个简单的清单中呢？这是我的真实结果：

{001: {image: "http://itgsmgroup.com/dev/foo/Activites-socio-culturelles.png", name: "Activités socioculturels"}
002: {image: "http://itgsmgroup.com/dev/foo/Accompagnement-juridique.png", name: "Accopagnement juridique"}
003: {image: "http://itgsmgroup.com/dev/foo/Sante.png", name: "santé"}
004: {image: "http://itgsmgroup.com/dev/foo/Formation.png", name: "formation et inseriton"}
005: {image: "", name: "information"}}
and this how i get data 
getData() {
        firebase.database().ref('categories/').on('value', (snapshot) => {
            console.log(snapshot.val());
            this.setState({
                data: snapshot.val()
            });    
        });
    }

Answer 1

在您对expo.io snack的问题进行检查时，检查一下我为工作样品准备的零食。

    export default class App extends React.Component {
      constructor(props){
       super(props)
       /**
       * This next line is used to convert the object that you receive from Firebase to an Array 
       * which is what a FlatList expects as data
       */
      var tempListData = Object.entries(rawData).map(([key, value]) => value) 
      this.state = {
      listData: tempListData
    }
  }

  componentDidMount() {
    //Normally this lifecycle method is where you would dispatch a call to firebase but for 
    //demostration purposes am using static data defined above.
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={{flex: 1, padding: 10}}
          data={this.state.listData}
          renderItem={({item})=>(<View style={{height: 40}}><Text>{item.name}</Text></View>)}
        />
      </View>
    );
  }
}

总而言之，您将需要将从Firebase获得的json对象转换为可以传递给Flatlist的Array。

我应该如何在我的应用程序中获取Firebase数据

1 个答案: