listAll 来自 firebase 的 getDownloadURL 存储在数组中以呈现图像的 FlatList 不起作用

Question

在我的 React Native 组件中，我尝试获取 Firebase 存储中所有图像的列表：

listAll(listRef).then((res) => {       
        res.items.forEach((itemRef) => {

对于每个图像，我执行 getDownloadURL：

 const downloadUrl = getDownloadURL(ref(storage, itemRef))

切片令牌（稍后用于密钥），创建一个对象并将该对象推入数组中：

downloadUrl.then((url) => {
                // Find token in url
                const indexOfToken = url.indexOf("&token=")

                // slice token from url [+7 is the length of the word '&token=']
                const token = url.slice(indexOfToken + 7)

                // create a image object
                const image = {
                    "imageUrl": url,
                    "imageToken": token
                }

                // store the image in eventImages array
                eventImages.push(image);

如果我尝试使用此数组渲染平面列表。

<FlatList data={imageData}
   keyExtractor={item => item.imageToken}
   renderItem={({ item }) => (                      
     <Image style={{ marginRight: 2, marginTop: 2, width: '50%', opacity: 1 }} 
     source={{ uri: imageData.imageUrl }} alt="Alternate Text" size="xl" />
     )}/>

数组为空。为什么？

---

完整代码

import React, { useState } from 'react'
import { StyleSheet, SafeAreaView } from 'react-native'
import { Image, FlatList } from "native-base"
import EventGalleryHeader from '../components/EventGalleryHeader.js'
import { getStorage, ref, getDownloadURL, list, listAll } from "firebase/storage"
import { LongPressGestureHandler, State } from 'react-native-gesture-handler'

export default function EventScreen(props) {

    const [imageData, setImageData] = useState();
    const eventImages = []
    const storage = getStorage();
    const listRef = ref(storage, '/eventimages/1645351776501/');

    listAll(listRef).then((res) => {
        res.items.forEach((itemRef) => {
            const downloadUrl = getDownloadURL(ref(storage, itemRef))
            downloadUrl.then((url) => {
                const indexOfToken = url.indexOf("&token=")
                const token = url.slice(indexOfToken + 7)
                const image = {
                    "imageUrl": url,
                    "imageToken": token
                }
                eventImages.push(image);
            }).catch((error) => {
                switch (error.code) {
                    case 'storage/object-not-found':
                        break;
                    case 'storage/unauthorized':
                        break;
                    case 'storage/canceled':
                        break;
                    case 'storage/unknown':
                        break;
                }
            });
            console.log(eventImages)
        });
    }).catch((error) => {
    });

    const onLongPress = (event) => {
        if (event.nativeEvent.state === State.ACTIVE) {
            alert("I've been pressed for 800 milliseconds");
        }
    };
    return (
        <SafeAreaView style={styles.container} >
            <FlatList _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }}
                style={styles.list}
                numColumns={2}
                ListHeaderComponent={<EventGalleryHeader data={props.route.params.eventData} />}
                data={imageData}
                keyExtractor={item => item.imageToken}
                renderItem={({ item }) => (
                    <LongPressGestureHandler
                        onHandlerStateChange={onLongPress}
                        minDurationMs={800}
                    >
                        <Image style={{ marginRight: 2, marginTop: 2, width: '50%', opacity: 1 }} source={{ uri: imageData.imageUrl }} alt="Alternate Text" size="xl" />
                    </LongPressGestureHandler>
                )}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 25,
    },
    image: {
        maxHeight: 450,
        width: '100%',
        height: 200,
        overflow: 'hidden',
    },
    list: {
        alignSelf: 'center',
    },
    gallery: {
        flex: 1,
        width: '100%',
        flexDirection: 'row',

    }
})

Answer 1

我认为您没有将图像添加到 imageData 状态

listAll(listRef).then((res) => {
    res.items.forEach((itemRef) => {
        const downloadUrl = getDownloadURL(ref(storage, itemRef))
        downloadUrl.then((url) => {
            const indexOfToken = url.indexOf("&token=")
            const token = url.slice(indexOfToken + 7)
            const image = {
                "imageUrl": url,
                "imageToken": token
            }
            eventImages.push(image);
        }).catch((error) => {
            switch (error.code) {
                case 'storage/object-not-found':
                    break;
                case 'storage/unauthorized':
                    break;
                case 'storage/canceled':
                    break;
                case 'storage/unknown':
                    break;
            }
        });
        console.log(eventImages)
        setImageData(eventImages) // <---- Add the images to the imageData state
    });
}).catch((error) => {
});

Answer 2

我重新考虑了我的代码并且是错误的。希望对于初学者来说是正常的。

这是我的工作编码器，用于直接从 Google Fireabase 商店加载图库。

import React, { Component } from 'react'
import { StyleSheet, SafeAreaView } from 'react-native'
import { Image, FlatList } from "native-base"
import EventGalleryHeader from '../components/EventGalleryHeader.js'
import { getStorage, ref, getDownloadURL, list, listAll } from "firebase/storage"
import { LongPressGestureHandler, State } from 'react-native-gesture-handler'

export default class EventScreen extends Component {

    constructor(props) {
        super(props);
        this.storage = getStorage()
        this.pathToImages = '/eventimages/'
        this.eventImageSource = this.props.route.params.eventData.key
        this.imagesRef = this.pathToImages + this.eventImageSource
        this.state = {
            isLoading: true,
            images: [],
            event: {
                adress: this.props.route.params.eventData.adress,
                hosts: this.props.route.params.eventData.hosts,
                description: this.props.route.params.eventData.description,
                eventtitle: this.props.route.params.eventData.eventtitle,
                invitecode: this.props.route.params.eventData.invitecode,
                key: this.props.route.params.eventData.key,
                timestamp: this.props.route.params.eventData.timestamp,
            }
        }
    }

    componentDidMount() {
        this.getEventImageData()
    }

    componentWillUnmount() {
    }

    getEventImageData() {
        const images = []
        const event = {
            adress: this.props.route.params.eventData.adress,
            description: this.props.route.params.eventData.description,
            eventtitle: this.props.route.params.eventData.eventtitle,
            key: this.props.route.params.eventData.key,
            timestamp: this.props.route.params.eventData.timestamp,
        }

        listAll(ref(this.storage, this.imagesRef))
            .then((res) => {
                res.items.forEach((itemRef) => {
                    // console.log(itemRef._location.path_)

                    getDownloadURL(itemRef)
                        .then((url) => {

                            const indexOfToken = url.indexOf("&token=")
                            const token = url.slice(indexOfToken + 7)
                            images.push({
                                "imageUrl": url,
                                "imageToken": token
                            });
                            this.setState({
                                images,
                                isLoading: false,
                                event
                            });
                            // console.log(this.state.images)
                        })
                        .catch((error) => {
                            switch (error.code) {
                                case 'storage/object-not-found':
                                    break;
                                case 'storage/unauthorized':
                                    break;
                                case 'storage/canceled':
                                    break;
                                case 'storage/unknown':
                                    break;
                            }
                        });


                });

            }).catch((error) => {
            });

    }


    onLongPress = (event) => {
        if (event.nativeEvent.state === State.ACTIVE) {
            alert("I've been pressed for 800 milliseconds");
        }
    };



    render() {

        return (
            <SafeAreaView style={styles.container} >
                <FlatList _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }}
                    style={styles.list}
                    numColumns={2}
                    ListHeaderComponent={<EventGalleryHeader data={this.state.event} />}
                    data={this.state.images}
                    keyExtractor={item => item.imageToken}
                    renderItem={({ item }) => (
                        <LongPressGestureHandler
                            onHandlerStateChange={this.onLongPress}
                            minDurationMs={800}
                        >
                            <Image style={{ marginRight: 2, marginTop: 2, width: '50%', opacity: 1 }} source={{ uri: item.imageUrl }} alt="Alternate Text" size="xl" />
                        </LongPressGestureHandler>
                    )}
                />
            </SafeAreaView>
        );

    };

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 25,

    },
    image: {
        maxHeight: 450,
        width: '100%',
        height: 200,
        overflow: 'hidden',
    },
    list: {
        alignSelf: 'center',
    },
    gallery: {
        flex: 1,
        width: '100%',
        flexDirection: 'row',

    }
})