Блог

Главная - Вопросы по программированию - Как настроить изображения из коллекции Firebase-Firestore для реакции-Родной-Галерея изображений

Как настроить изображения из коллекции Firebase-Firestore для реакции-Родной-Галерея изображений

# #firebase #react-native #google-cloud-firestore #image-gallery #react-native-firebase

Вопрос:

Я создаю мобильное приложение, я хочу установить свои изображения из коллекций firestore в свою галерею изображений react-native. Я уже получил все свои ссылки на изображения из firestore, но я не мог решить, как установить их в свою галерею изображений. Мои коды галереи изображений react-native с изображениями:

 <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 :
Коллекция Firestore_Collection

Ответ №1:

Наконец, потратив несколько часов, я решил свою проблему. Я использовал «источник:» вместо «данные:» в списке изображений[] в своем сервисном коде.

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

И мой код галереи (ссылка на изображение-это список изображений, который приходит из службы).:

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

Это решило мою проблему.

Метки: