如何在 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;

让我知道它是否有效:)