循环嵌套 object 反应原生

Question

我是本机反应的新手，想通过嵌套的 object 循环。 我创建了一个名为“spots.js”的文件，如下所示：

export {spots};

var spots = [
  {
    name: 'Barberistas',
    location: 'Geleen',
    img_url: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
    isFavourite: false,
    imagesReviews:{
      img1: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
      img2: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
      img3: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
    }
  },
]

现在我正在尝试显示来自 imagesReviews 的“点”的图像。 我知道我如何通过 object 循环，但我被这个嵌套的 object 卡住了。 目前我有这个：

<ScrollView horizontal={true}> 
  {
    spots.map((l) => {
      return <Image source={ l.imagesReviews }></Image>

    })
  } 
</ScrollView>

结构截图：在此处输入图片描述

有没有人可以帮我在这个滚动视图中显示这些图片？ 我以正确的方式导入了所有内容，我唯一的问题是如何循环通过嵌套的 object 并且只显示 imagesReviews？

Answer 1

您可以使用Object.keys()来迭代内部 object。

你可以这样做，

{
  spots.map((l) => {
    //It might be possible that not every object in spots array has imagesReviews object. 
    //Just put a check that every node in spots array contains imagesReviews object and then only show Image

    if(l.imagesReviews){
       return Object.keys(l.imagesReviews).map(key => <Image source={ l.imagesReviews[key] }></Image>)
    }
  })
}