javascript - 显示来自 firebase 存储的所有图像（反应原生）

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>
                ))}
    );
 }

标签： javascriptreact-nativeexpofirebase-storage

Answer 1

listAll()API返回 a 的 promise ，ListResult其中包含项目列表，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>
))}