Flatlist 未在反应原生 expo 中呈现代码

Question

我的代码

import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  FlatList,
} from "react-native";
import { initializeApp } from "firebase/app";
import { getDatabase, ref, onValue, child, get } from "firebase/database";
import React, { useState } from "react";

const Product = () => {
  //Initialize Firebase
  const firebaseConfig = {
//private
  };
  initializeApp(firebaseConfig);
  const db = getDatabase();
  //Make a variable to store data
  var data = [];
  const dbRef = ref(db, "/Products");
  var indexOfData = 0;
  onValue(
    dbRef,
    (snapshot) => {
      snapshot.forEach((childSnapshot) => {
        indexOfData++;
        const childKey = childSnapshot.key;
        const childData = childSnapshot.val();
        data.push({
          ["id"]: indexOfData,
          ["key"]: childKey,
          ["value"]: childData,
        });
      });
    },
    {
      onlyOnce: true,
    }
  );
  const [product, setProduct] = useState(data);
  console.log(product);
  const navigateToAnotherPlace = (wheretonavigate) => {
    console.log("Navigating to another place");
    console.log(wheretonavigate);
  };

  const courseCard = ({item}) => {
    return (
      <View style={styles.card}>
        <View style={styles.cardImageCenter}>
          <Image
            style={styles.cardImage}
            source={{
              uri: item.value,
            }}
          />
        </View>
        <Text style={styles.cardHeading}>{item.key}</Text>
        <Button style={styles.cardButton} onPress={navigateToAnotherPlace(item.key)} title="View" />
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Product</Text>
        <FlatList
          data={product}
          renderItem={courseCard}
          keyExtractor={(item) => item.id}
        />
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: "#fff",
    borderRadius: 5,
    padding: 10,
    margin: 10,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    height: 300,
  },
  cardText: {
    fontSize: 20,
    fontWeight: "bold",
    margin: 5,
  },
  cardImage: {
    width: "100%",
    height: "100%",
    resizeMode: "contain",
  },
  cardHeading: {
    fontSize: 20,
    fontWeight: "bold",
    margin: 5,
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  cardButton: {
    fontSize: 20,
    backgroundColor: "#f2f2f2",
    borderRadius: 5,
    padding: 10,
    margin: 10,
    shadowColor: "#000000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    height: 300,
    width: "100%",
    alignItems: "center",
  },
  cardImageCenter: {
    alignItems: "center",
    justifyContent: "center",
    height: "70%",
    width: "100%",
  },
});

export default Product;

在这里，我可以从 firebase 获得 object 但无法使用 flatlist 呈现它 请添加答案 当我测试这个应用程序时一切正常但 flatlist 不显示数据如果您有任何答案请发送整个代码 那么目的是什么这个屏幕的？ Ans-> 我从 firebase 获取数据，我需要以卡片的形式显示该数据库

Answer 1

我尝试重构您的代码，添加了 state，您在其中存储数组data并在组件中全局使用该product 。

我已在您的平面列表flatlist渲染中将产品作为参数传递。 请尝试让我知道结果。

const Product = () => {
  const [product, setProduct] = React.useState([]);
  //Initialize Firebase
  const firebaseConfig = {
     //private
  };

  React.useEffect(() => {
    initializeApp(firebaseConfig);
    const db = getDatabase();
    //Make a variable to store data
    var data = [];
    const dbRef = ref(db, "/Products");
    var indexOfData = 0;
    onValue(
      dbRef,
      (snapshot) => {
         snapshot.forEach((childSnapshot) => {
           indexOfData++;
           const childKey = childSnapshot.key;
           const childData = childSnapshot.val();
           data.push({
              ["id"]: indexOfData,
              ["key"]: childKey,
              ["value"]: childData,
           });
        });
      },
      {
        onlyOnce: true,
      }
    );
     setProduct([...product, ...data])

   },[]);

   const navigateToAnotherPlace = (wheretonavigate) => {
      console.log("Navigating to another place");
      console.log(wheretonavigate);
   };

  const courseCard = (item) => {
    return (
      <View style={styles.card}>
        <View style={styles.cardImageCenter}>
        <Image
           style={styles.cardImage}
           source={{
           uri: item.value,
           }}
         />
        </View>
        <Text style={styles.cardHeading}>{item.key}</Text>
        <Button style={styles.cardButton} onPress= 
            {navigateToAnotherPlace(item.key)} title="View" />
     </View>
   );
  };
  return (
     <View style={styles.container}>
       <Text style={styles.text}>Product</Text>
         <FlatList
           data={product}
           renderItem={(product)=>courseCard(product)}
           keyExtractor={(item) => item.id}
         />
     </View>
   );
 };

Answer 2

UI 和 FlatList 对我来说很好用。 我认为您获取数据的方式存在问题。 尝试这个：

const Product = () => {
   const [products, setProducts] = useState([]);
   //Initialize Firebase
   const firebaseConfig = {
      //private
   };

  useEffect(() => {
    initializeApp(firebaseConfig);
    const db = getDatabase();
    //Make a variable to store data
    let data = [];
    const dbRef = ref(db, "/Products");
    var indexOfData = 0;
    onValue(
      dbRef,
      (snapshot) => {
         snapshot.forEach((childSnapshot) => {
           indexOfData++;
           const childKey = childSnapshot.key;
           const childData = childSnapshot.val();
           data.push({
              ["id"]: indexOfData,
              ["key"]: childKey,
              ["value"]: childData,
           });
        });
      },
      {
        onlyOnce: true,
      }
    );
     setProducts(prv=>[...prv, ...data])
   
   },[]);
   /*.....*/