如何将图像从 Firebase-Firestore 集合设置为 React-Native-Image-Gallery

如何解决如何将图像从 Firebase-Firestore 集合设置为 React-Native-Image-Gallery

我正在构建一个移动应用程序，我想将我的图片从 firestore-collections 设置到我的 react-native-image-gallery。我已经从 firestore 获得了我的所有图像链接，但我无法解决如何将它们设置到我的图像库。我的带有图像的 react-native-image-gallery 代码是：

<SafeAreaView>
    {/* home screen navbar --------------------------------------------------------------------------*/}
    <View style={[{height: '100%%',backgroundColor:'white'}]}>
        <Gallery
            style={{ flex: 1,backgroundColor: 'black' }}
            images={[
                { source: { uri: 'https://headenglish.com/wp-content/uploads/2020/07/74.-BEYZA-MEMİŞ.jpg' } },{ source: { uri: 'https://headenglish.com/wp-content/uploads/2020/07/1.-RÜMEYSA-DURMAZ.jpg' } },{ source: { uri: 'https://headenglish.com/wp-content/uploads/2020/07/2.-NİLAY-AYTEKİN.jpg' } },{ source: { uri: 'https://headenglish.com/wp-content/uploads/2020/07/3.-HATİCE-KÜBRA-TOZ.jpg' } },{ source: { uri: 'https://headenglish.com/wp-content/uploads/2020/07/5.-EDA-ARICI.jpg' } },{ source: { uri: 'https://headenglish.com/wp-content/uploads/2020/07/6.-MELİKE-ZEYNEP-ER.jpg' } },{ source: { uri: 'https://headenglish.com/wp-content/uploads/2020/07/7.-BEKİR-TAHA-GÜVENÇ.jpg' } },{ source: { uri: 'https://headenglish.com/wp-content/uploads/2020/07/8.-AYŞENUR-YILDIRIM.jpg' } }
            ]}
        />
    </View>
</SafeAreaView>

但我想动态地制作它们。我获取图片链接的服务代码是：

export const GetStudentReviews = (SuccessOperation,FailedOperation) => {
return(dispatch) => {
    const REF_DATABASE = FireBase.db.collection('StudentReviews').orderBy("DATE","desc");

    REF_DATABASE.get().then(function(querySnapshot) {
        if (querySnapshot.docs.length > 0)
        {
            const imageList  = [];
            querySnapshot.forEach(function(doc) {
                // doc.data() is never undefined for query doc snapshots
                imageList.push({
                    id:doc.id,data:doc.data()
                })
            });
            dispatch({ type: STUDENT_DISPATCH,payload:{ props:'StudentReviewListSection',value:imageList } });
            SuccessOperation();
        }
        else
        {
            dispatch({ type: STUDENT_DISPATCH,value:[] } });
            FailedOperation();

        }
    }).catch(function(error) {

        dispatch({ type: STUDENT_DISPATCH,value:[] } });
        FailedOperation({errorMsg: error});
        console.log(error);
    });
}
};

和我的firestore截图：

解决方法

我花了几个小时终于解决了我的问题。我在服务代码的 imageList[] 中使用了“source:”而不是“data:”。

export const GetStudentReviews = (SuccessOperation,FailedOperation) => {
return(dispatch) => {
    const REF_DATABASE = FireBase.db.collection('StudentReviews');

    REF_DATABASE.get().then(function(querySnapshot) {
        if (querySnapshot.docs.length > 0)
        {
            const imageList  = [];
            querySnapshot.forEach(function(doc) {
                // doc.data() is never undefined for query doc snapshots
                imageList.push({
                    source: { uri:doc.data().STUDENT_REVIEW_URL },})

            });
            console.log("IMAGE_LIST",imageList);
            dispatch({ type: STUDENT_DISPATCH,payload:{ props:'StudentReviewListSection',value:imageList } });
            SuccessOperation({STUDENT_REVIEWS:imageList});
        }
        else
        {
            dispatch({ type: STUDENT_DISPATCH,value:[] } });
            FailedOperation();

        }
    }).catch(function(error) {

        dispatch({ type: STUDENT_DISPATCH,value:[] } });
        FailedOperation({errorMsg: error});
        console.log(error);
    });
}
};

还有我的图库代码（imageLink 是来自服务的 imageList。）：

 <SafeAreaView>
                {/* home screen navbar --------------------------------------------------------------------------*/}
                <View style={[{height: '100%%',backgroundColor:'white'}]}>
                    <Gallery
                        style={{ flex: 1,backgroundColor: 'black' }}
                        images={imageLink}
                    />
                </View>
            </SafeAreaView>

这解决了我的问题。