如何将图像从 Firebase-Firestore 集合设置为 React-Native-Image-Gallery
How to set images From Firebase-Firestore collection to React-Native-Image-Gallery
我正在构建一个移动应用程序,我想将我的图像从 firestore-collections 设置到我的 react-native-image-gallery。我已经从 firestore 获得了所有 link 的图像,但我无法解决如何将它们设置到我的图像库中的问题。我的带有图像的 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>
但我想动态地制作它们。我获取图像 link 的服务代码是:
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 截图:
我花了几个小时终于解决了我的问题。我在服务代码的 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>
这解决了我的问题。
我正在构建一个移动应用程序,我想将我的图像从 firestore-collections 设置到我的 react-native-image-gallery。我已经从 firestore 获得了所有 link 的图像,但我无法解决如何将它们设置到我的图像库中的问题。我的带有图像的 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>
但我想动态地制作它们。我获取图像 link 的服务代码是:
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 截图:
我花了几个小时终于解决了我的问题。我在服务代码的 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>
这解决了我的问题。