如何在 React Native 中顯示 Firebase 存儲中的所有圖像而不需要圖像名稱？

Question

您好，我想弄清楚如何顯示我在 Firebase 存儲中名為“VerifiedPhotos”的文件夾中的所有圖像。 我不想像下面那樣通過圖像名稱引用它們，因為我有多個圖像。 如何獲取所有圖像 URL 列表並在 React Native 中將它們顯示到我的屏幕上？ 請幫助我整周都在查找如何使用 listAll() 並且我也不確定如何在 return 語句中顯示多個圖像。 請幫忙。

  const Photos = () => {
  const [imageUrl, setImageUrl] = useState(undefined);

  useEffect(() => {
      firebase.storage()
        .ref('VerifiedPhotos/' + '3.png') //name in storage in firebase console
        .getDownloadURL()
        .then((url) => {
          setImageUrl(url);
        })
        .catch((e) => console.log('Errors while downloading => ', e));
    }, []);
  
  return (
      <Image style={{height: 200, width: 200}} source={{uri: imageUrl}} />
  );
}

export default Photos;

Answer 1

正如文檔所說的.listAll() here ，您需要遍歷結果：

const Photos = () => {
  const [imageTab, setImageTab] = useState([]);

  useEffect(() => {
    firebase.storage()
      .ref('VerifiedPhotos/')
      .listAll()
      .then(function(result) {
          result.items.forEach(function(imageRef) {
              imageRef.getDownloadURL().then(function(url) {
                  imageTab.push(url);
                  setImageTab(imageTab);
              }).catch(function(error) {
                  // Handle any errors
              });
          });
      })
      .catch((e) => console.log('Errors while downloading => ', e));
  }, []);

  return (<View>
    {imageTab.map(i => (<Image style={{height: 200, width: 200}} source={{uri: i}} />))}
  </View>);
}

export default Photos;

讓我知道它是否有效:)