firebase - React Native：将所有图像从 Firebase 存储下载到平面列表中

Question

我正在使用 react-native 开发一个健身应用程序。目前，我所有的运动图像都存储在本地，但我现在希望从 Firebase 存储中下载图像。在 Firebase 中，我在一个图像文件夹中上传了 21 张图像，该文件夹还有另外 2 个文件夹——foamRoll 和 stretches。

我想做的事

我想将foamRoll 文件夹（在firebase 存储中）中的所有8 个图像下载到我的Flatlist 中。

我做了什么

在下面的代码片段中有我的整个泡沫卷屏代码。我留下了用于获取本地存储文件的旧代码，以及（尝试）使用 useEffect 获取新文件的工作。但是我被卡住了，文档没有帮助！

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  FlatList,
  Image,
  TouchableOpacity,
  Modal,
  TouchableHighlight,
} from "react-native";

import { Colors } from "../colors/Colors";
import { firebase } from "../firebase/config";

const DATA = [
  {
    id: "1",
    title: "Calves",
    section: "Foam Roller",
    image: require("../../assets/FR1.png"),
  },
  {
    id: "2",
    title: "Tibialis Anterior (Shin)",
    section: "Foam Roller",
    image: require("../../assets/FR2.png"),
  },
  {
    id: "3",
    title: "Quads",
    section: "Foam Roller",
    image: require("../../assets/FR3.png"),
  },
  {
    id: "4",
    title: "ITB (Outside of legs)",
    section: "Foam Roller",
    image: require("../../assets/FR4.png"),
  },
  {
    id: "5",
    title: "Glutes (Bum)",
    section: "Foam Roller",
    image: require("../../assets/FR5.png"),
  },
  {
    id: "6",
    title: "Traps (Back)",
    section: "Foam Roller",
    image: require("../../assets/FR6.png"),
  },
  {
    id: "7",
    title: "Lats (Side)",
    section: "Foam Roller",
    image: require("../../assets/FR7.png"),
  },
  {
    id: "8",
    title: "Pecs (Chest)",
    section: "Foam Roller",
    image: require("../../assets/FR8.png"),
  },
];

export default function ExercisesScreen() {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentItem, setCurrentItem] = useState({});
  const [entities, setEntities] = useState([]);

  const entityRef = firebase.firestore().collection("entities");
  const storageRef = firebase.storage().ref("images/foamRoll");

  useEffect(() => {
    storageRef.list().then((result) => {
      // Loop over each item
      result.items.forEach((pics) => {
        firebase
          .storage()
          .ref()
          .child("images/foamRoll")
          .getDownloadURL()
          .then((url) => {
            console.log(url);
            //these url will be used to display images
          });
      });
    });
  }, []);

  const Item = ({ item }) => (
    <View style={styles.item}>
      <Image source={item.image} style={styles.exerciseImage} />
      <View style={styles.detailSection}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.section}>{item.section}</Text>
      </View>
      <TouchableOpacity
        style={styles.viewButton}
        onPress={() => {
          openSettingsModal(item);
        }}
      >
        <Text style={styles.viewText}>View</Text>
      </TouchableOpacity>
    </View>
  );

  const openSettingsModal = (item) => {
    setCurrentItem(item);
    setModalVisible(!modalVisible);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.tabBackground}>
        <Text style={styles.subTitle}>EXERCISES: FOAM ROLLER</Text>
      </View>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>{currentItem.modalTitle}</Text>
            <Text style={styles.modalText}>{currentItem.modalDesc}</Text>
            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item item={item} />}
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({})

标签： firebasereact-nativefirebase-storage