显示来自firebase存储(react native)的所有图像

Question

我可以让它显示一个图像，但进入一个文件夹并显示所有图像。我觉得我的映射是错误的。

根据我的理解，.child()指的是文件的名称，但根据我的了解，它也可以指你想要访问的文件夹，listAll()告诉它列出该文件的所有文件。

const [sampleImage, setSampleImage] = useState(); 
const getSampleImage = async () => {
const imageRef = firebase.storage().ref().child('Front/').listAll();
const url = await imageRef.getDownloadURL().catch((error) => { throw error });
setSampleImage(url);
}

useEffect(() => {
getSampleImage();
});

return (
{ sampleImage && getSampleImage.map(Image => (
<View style={{ justifyContent: 'center' }} key={imageRef.id}>
<Image source={{ uri: sampleImage.get(k) }} style={{ width: 350, height: 350 }} /> 
</View>
))}
);
}

Answer 1

listAll()API返回一个ListResult的promise，其中包含StorageReference项的列表，因此您需要等待该列表，循环该列表，并对每个项调用getDownloadURL()。

类似于：

const getSampleImage = async () => {
const imageRefs = await firebase.storage().ref().child('Front/').listAll();
const urls = await Promise.all(imageRefs.items.map((ref) => ref.getDownloadURL());
setSampleImage(urls);
}

然后：

{ sampleImage && getSampleImage().map(url => (
<View style={{ justifyContent: 'center' }} key={imageRef.id}>
<Image source={{ uri: url }} style={{ width: 350, height: 350 }} /> 
</View>
))}