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

【问题标题】：How to set images From Firebase-Firestore collection to React-Native-Image-Gallery如何将图像从 Firebase-Firestore 集合设置到 React-Native-Image-Gallery
【发布时间】：2021-05-29 16:26:04
【问题描述】：

我正在构建一个移动应用程序，我想将我的图像从 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, payload:{ props:'StudentReviewListSection', value:[] } });
            FailedOperation();

        }
    }).catch(function(error) {

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

还有我的 Firestore 截图：

【问题讨论】：

标签： firebase react-native google-cloud-firestore image-gallery react-native-firebase

【解决方案1】：

我花了几个小时终于解决了我的问题。我在服务代码中的 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, payload:{ props:'StudentReviewListSection', value:[] } });
            FailedOperation();

        }
    }).catch(function(error) {

        dispatch({ type: STUDENT_DISPATCH, payload:{ props:'StudentReviewListSection', 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>

这解决了我的问题。

【讨论】：