【问题标题】:How to display an array of images from the firestore database in react native?如何在本机反应中显示来自firestore数据库的一组图像?
【发布时间】:2019-08-19 02:00:46
【问题描述】:

你好,如何在 react native 中显示来自 firestore 数据库的图像数组?我试过了,但没有图像显示

{this.props.user.map((images)=>{
return (
  <View>
    <Image style={ {width: 350, height: 300}} source={{uri: images.photos}} />
  </View>
);
})}

我在屏幕底部收到这条黄色警告

''警告:失败的道具类型:提供给'ForwardRef(图像)'''的道具'源'无效

【问题讨论】:

标签: firebase react-native google-cloud-firestore


【解决方案1】:

我相信你没有在源 uri 中给出图像的正确路径。可以先在 postman 中查一下 images.photos 是什么数据类型吗?如果它不是图像的 url,react native 将不会呈现。始终将您的图像存储为 images.photos.uri 以便于澄清。顺便说一句,如果 images.photos 是一个 url 数组,那么 react Native 将不会渲染。您需要将每个 uri 传递给每个图像标签,您可以做的是在另一个 map 函数中迭代图像,以便迭代每个图像。

【讨论】:

  • 好的,images.photos 是一个 url 数组,你能告诉我一个关于如何做到这一点的例子吗''将每个 uri 传递给每个图像标签,你可以做的是在另一个中迭代图像map 函数,以便迭代每个图像。 ''@GauravRoy
  • 嘿@E.pross,PFB 解决方案,我假设你在照片中有一组 url,所以我直接将它作为 uri 源传递,如果它在一个对象中,你可以替换uri 中的图像与 source={{uri: mage.uri}} 中的 image.uri :如果您认为它是正确的,请进行投票,以便它可以帮助其他人{this.props.user.map((images)=&gt;{ images.photos.map((image) =&gt;{ return ( &lt;View&gt; &lt;Image style={ {width: 350, height: 300}} source={{uri: image}} /&gt; &lt;/View&gt; ); }) })}
  • 嗨@GauravRoy谢谢我尝试了你的解决方案它工作但图像仍然没有显示,我控制台日志图像和所有图像url都是控制台日志但它没有显示图像标签跨度>
  • 你能把整个 images.photos 数据对象发给我吗?
  • 嗨@GauravRoy,数据在firestore数据库中,这是我试图在这里显示照片数组的结构:` Object { "age": 9, "books": Array [ 1, 3 , ], "city": "NYC", "name": "Marry", "photos": Array [ "picsum.photos/id/1001/5616/3744", "picsum.photos/id/1002/4312/2868", "picsum.photos/id/1003/1181/1772", ], } `
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-02-13
  • 1970-01-01
  • 1970-01-01
  • 2021-05-24
  • 2019-01-23
  • 1970-01-01
  • 2021-04-15
相关资源
最近更新 更多