如何在recat本机中映射json文件中的数据？

Question

我正在尝试用图像来获取数据，但是我如何在每一项中都做两张地图--我只需要每个项目的第一张图像。

这里是JSON文件

"items": Array [
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/5staYrHq4jR1NiBfRR2XWr",
        },
        "followers": Object {
          "href": null,
          "total": 433,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/5staYrHq4jR1NiBfRR2XWr",
        "id": "5staYrHq4jR1NiBfRR2XWr",
        "images": Array [
          Object {
            "height": 640,
            "url": "https://i.scdn.co/image/ab6761610000e5eb038f9071ec89962e7ad16b77",
            "width": 640,
          },
          Object {
            "height": 320,
            "url": "https://i.scdn.co/image/ab67616100005174038f9071ec89962e7ad16b77",
            "width": 320,
          },
          Object {
            "height": 160,
            "url": "https://i.scdn.co/image/ab6761610000f178038f9071ec89962e7ad16b77",
            "width": 160,
          },
        ],
        "name": "DOXX",
        "popularity": 6,
        "type": "artist",
        "uri": "spotify:artist:5staYrHq4jR1NiBfRR2XWr",
      },
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/1MVFEpYdHtdV3k8Bgs79Pl",
        },
        "followers": Object {
          "href": null,
          "total": 404,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/1MVFEpYdHtdV3k8Bgs79Pl",
        "id": "1MVFEpYdHtdV3k8Bgs79Pl",
        "images": Array [
          Object {
            "height": 640,
            "url": "https://i.scdn.co/image/ab6761610000e5ebd1578a57ff89ac9aeed23863",
            "width": 640,
          },
          Object {
            "height": 320,
            "url": "https://i.scdn.co/image/ab67616100005174d1578a57ff89ac9aeed23863",
            "width": 320,
          },
          Object {
            "height": 160,
            "url": "https://i.scdn.co/image/ab6761610000f178d1578a57ff89ac9aeed23863",
            "width": 160,
          },
        ],
        "name": "DOXY",
        "popularity": 14,
        "type": "artist",
        "uri": "spotify:artist:1MVFEpYdHtdV3k8Bgs79Pl",
      },
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/1HliyC4gHWRHHFy3CjR3Bp",
        },
        "followers": Object {
          "href": null,
          "total": 2,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/1HliyC4gHWRHHFy3CjR3Bp",
        "id": "1HliyC4gHWRHHFy3CjR3Bp",
        "images": Array [],
        "name": "Doxy601",
        "popularity": 5,
        "type": "artist",
        "uri": "spotify:artist:1HliyC4gHWRHHFy3CjR3Bp",
      },
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/7d8a8D8ZfVdYsuAcMk4Kxy",
        },
        "followers": Object {
          "href": null,
          "total": 97,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/7d8a8D8ZfVdYsuAcMk4Kxy",
        "id": "7d8a8D8ZfVdYsuAcMk4Kxy",
        "images": Array [
          Object {
            "height": 640,
            "url": "https://i.scdn.co/image/ab67616d0000b2736862f6dfd64d0c65d70c4623",
            "width": 640,
          },
          Object {
            "height": 300,
            "url": "https://i.scdn.co/image/ab67616d00001e026862f6dfd64d0c65d70c4623",
            "width": 300,
          },
          Object {
            "height": 64,
            "url": "https://i.scdn.co/image/ab67616d000048516862f6dfd64d0c65d70c4623",
            "width": 64,
          },
        ],
        "name": "Miles Davis & Milt Jackson",
        "popularity": 5,
        "type": "artist",
        "uri": "spotify:artist:7d8a8D8ZfVdYsuAcMk4Kxy",
      },
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/6NrhhuvYUPDmZ7RiZAWQih",
        },
        "followers": Object {
          "href": null,
          "total": 546,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/6NrhhuvYUPDmZ7RiZAWQih",
        "id": "6NrhhuvYUPDmZ7RiZAWQih",
        "images": Array [
          Object {
            "height": 640,
            "url": "https://i.scdn.co/image/ab6761610000e5ebe2cae73d43e39e83aebc2bf5",
            "width": 640,
          },
          Object {
            "height": 320,
            "url": "https://i.scdn.co/image/ab67616100005174e2cae73d43e39e83aebc2bf5",
            "width": 320,
          },
          Object {
            "height": 160,
            "url": "https://i.scdn.co/image/ab6761610000f178e2cae73d43e39e83aebc2bf5",
            "width": 160,
          },
        ],
        "name": "DOX",
        "popularity": 25,
        "type": "artist",
        "uri": "spotify:artist:6NrhhuvYUPDmZ7RiZAWQih",
      },
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/6792Ts7YzD8dhGkgSHPNEL",
        },
        "followers": Object {
          "href": null,
          "total": 125,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/6792Ts7YzD8dhGkgSHPNEL",
        "id": "6792Ts7YzD8dhGkgSHPNEL",
        "images": Array [
          Object {
            "height": 640,
            "url": "https://i.scdn.co/image/ab67616d0000b273e2318a139e0f022870baac23",
            "width": 640,
          },
          Object {
            "height": 300,
            "url": "https://i.scdn.co/image/ab67616d00001e02e2318a139e0f022870baac23",
            "width": 300,
          },
          Object {
            "height": 64,
            "url": "https://i.scdn.co/image/ab67616d00004851e2318a139e0f022870baac23",
            "width": 64,
          },
        ],
        "name": "Miles Davis And Milt Jackson Sextet",
        "popularity": 1,
        "type": "artist",
        "uri": "spotify:artist:6792Ts7YzD8dhGkgSHPNEL",
      },
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/2b69LpXVfEagXEJpHjj3vW",
        },
        "followers": Object {
          "href": null,
          "total": 10,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/2b69LpXVfEagXEJpHjj3vW",
        "id": "2b69LpXVfEagXEJpHjj3vW",
        "images": Array [
          Object {
            "height": 640,
            "url": "https://i.scdn.co/image/ab6761610000e5eb634c7182d6152094085cf475",
            "width": 640,
          },
          Object {
            "height": 320,
            "url": "https://i.scdn.co/image/ab67616100005174634c7182d6152094085cf475",
            "width": 320,
          },
          Object {
            "height": 160,
            "url": "https://i.scdn.co/image/ab6761610000f178634c7182d6152094085cf475",
            "width": 160,
          },
        ],
        "name": "XODUS MMXXI",
        "popularity": 12,
        "type": "artist",
        "uri": "spotify:artist:2b69LpXVfEagXEJpHjj3vW",
      },
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/1IhDCe20UkuG9o00cnhvS8",
        },
        "followers": Object {
          "href": null,
          "total": 106,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/1IhDCe20UkuG9o00cnhvS8",
        "id": "1IhDCe20UkuG9o00cnhvS8",
        "images": Array [
          Object {
            "height": 640,
            "url": "https://i.scdn.co/image/ab67616d0000b273802c20b22f713bf4ca551ea9",
            "width": 640,
          },
          Object {
            "height": 300,
            "url": "https://i.scdn.co/image/ab67616d00001e02802c20b22f713bf4ca551ea9",
            "width": 300,
          },
          Object {
            "height": 64,
            "url": "https://i.scdn.co/image/ab67616d00004851802c20b22f713bf4ca551ea9",
            "width": 64,
          },
        ],
        "name": "Doxi",
        "popularity": 11,
        "type": "artist",
        "uri": "spotify:artist:1IhDCe20UkuG9o00cnhvS8",
      },
      Object {
        "external_urls": Object {
          "spotify": "https://open.spotify.com/artist/0joBZjd7WSxAGlRC2pvaJM",
        },
        "followers": Object {
          "href": null,
          "total": 0,
        },
        "genres": Array [],
        "href": "https://api.spotify.com/v1/artists/0joBZjd7WSxAGlRC2pvaJM",
        "id": "0joBZjd7WSxAGlRC2pvaJM",
        "images": Array [
          Object {
            "height": 640,
            "url": "https://i.scdn.co/image/ab67616d0000b27375b17d2e3f94ae1bddd65046",
            "width": 640,
          },
          Object {
            "height": 300,
            "url": "https://i.scdn.co/image/ab67616d00001e0275b17d2e3f94ae1bddd65046",
            "width": 300,
          },
          Object {
            "height": 64,
            "url": "https://i.scdn.co/image/ab67616d0000485175b17d2e3f94ae1bddd65046",
            "width": 64,
          },
        ],
        "name": "Prod.Dozy",
        "popularity": 1,
        "type": "artist",
        "uri": "spotify:artist:0joBZjd7WSxAGlRC2pvaJM",
      },

`

我这样做是为了映射数据{items.map((数据，i)=>({data.name}))}我这样做是可行的，但我也想为每个项目获得第一个图像--我能在彼此之间做两个映射吗？

但是我如何用每个项目的第一张图像来获取这些数据

Answer 1

只需使用一个映射就可以从数组中加载多个项。要获取每个项的第一个映像，您必须从图像数组[0]访问第一个项，从该图像中需要url来填充<Image/>组件的source属性(来自ReveNative)。您还需要为style属性提供宽度和高度，如下所示：

{items.map((data) => ( <> 
        <Image style={{width: `${data.images[0].width}`, height: `${data.images[0].height}` }} source={require(`${data.images[0].url}`)}/>
        <div>{data.name}</div> </>))}

我还将Image和div包装成一个反应片段：<></>