Question

我正在学习RN，现在，我正在寻找一个仅包含图像的JSON文件夹，以便当用户点击该角色的个人资料的图库按钮时可以动态调用它们。有人可以看看我如何设置它，让我知道这是否是正确的方法吗？我创建了另一个JSON文件夹，但是每个字符都有基本信息。任何反馈都值得欢迎和赞赏。

//characterimages.js    
const characterimages = [
      {
        id: "1",
        name: "Homer Simpson",
        url:
          "https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg",
        url:
          "https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg",
        url:
          "https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg",
        url:
          "https://i.pinimg.com/564x/f4/71/79/f471798aeeae427474f544691d572970.jpg"
      },
      {
        id: "2",
        name: "Marge Simpson",
        url:
          "https://i.pinimg.com/564x/63/e4/7d/63e47d98e66622bbff5e4578ccffeffc.jpg",
        url:
          "https://i.pinimg.com/564x/04/48/60/044860ebcd5d6c14a1140b351cb620b1.jpg",
        url:
          "https://i.pinimg.com/564x/6d/99/26/6d9926fa54bc3650acf9295d997fc72c.jpg"
      },
      {
        id: "3",
        name: "Bart Simpson",
        url:
          "https://i.pinimg.com/564x/fe/18/af/fe18af309234936e231fa107c6d2b4c7.jpg",
        url:
          "https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg",
        url:
          "https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg",
        url:
          "https://i.pinimg.com/474x/46/d8/93/46d893909c8a49061c11116ff7cb7a4c.jpg"
      },
      {
        id: "4",
        name: "Lisa Simpson",
        url:
          "https://i.pinimg.com/474x/c9/be/ad/c9beadfa8f6d739c5b61695cfd490f28.jpg",
        url:
          "https://i.pinimg.com/564x/39/a2/93/39a293f167c3336b04edd651438e311f.jpg",
        url:
          "https://i.pinimg.com/474x/4f/62/17/4f621710d6424668960c0a2faecc0202.jpg"
      }
    ];
    export default characterimages;

Answer 1

图像路径中的密钥是相同的名称。您必须更改密钥的名称。

示例

const characterimages = [
      {
        id: "1",
        name: "Homer Simpson",
        urlone:
          "https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg",
        urltwo:
          "https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg",
        urlthree:
          "https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg",
        urlfour:
          "https://i.pinimg.com/564x/f4/71/79/f471798aeeae427474f544691d572970.jpg"
      },
      {
        id: "2",
        name: "Marge Simpson",
        urlone:
          "https://i.pinimg.com/564x/63/e4/7d/63e47d98e66622bbff5e4578ccffeffc.jpg",
        urltwo:
          "https://i.pinimg.com/564x/04/48/60/044860ebcd5d6c14a1140b351cb620b1.jpg",
        urlthree:
          "https://i.pinimg.com/564x/6d/99/26/6d9926fa54bc3650acf9295d997fc72c.jpg"
      },
...

Answer 2

如果您有一系列网址，则可以轻松进行迭代：

const characterimages = [
  {
    id: '1',
    name: 'Homer Simpson',
    urls: [
      'https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg',
      'https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg',
      'https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg',
      'https://i.pinimg.com/564x/f4/71/79/f471798aeeae427474f544691d572970.jpg',
    ],
  },
  {
    id: '2',
    name: 'Marge Simpson',
    urls: [
      'https://i.pinimg.com/564x/63/e4/7d/63e47d98e66622bbff5e4578ccffeffc.jpg',
      'https://i.pinimg.com/564x/04/48/60/044860ebcd5d6c14a1140b351cb620b1.jpg',
      'https://i.pinimg.com/564x/6d/99/26/6d9926fa54bc3650acf9295d997fc72c.jpg',
    ],
  },
  {
    id: '3',
    name: 'Bart Simpson',
    urls: [
      'https://i.pinimg.com/564x/fe/18/af/fe18af309234936e231fa107c6d2b4c7.jpg',
      'https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg',
      'https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg',
      'https://i.pinimg.com/474x/46/d8/93/46d893909c8a49061c11116ff7cb7a4c.jpg',
    ],
  },
  {
    id: '4',
    name: 'Lisa Simpson',
    urls: [
      'https://i.pinimg.com/474x/c9/be/ad/c9beadfa8f6d739c5b61695cfd490f28.jpg',
      'https://i.pinimg.com/564x/39/a2/93/39a293f167c3336b04edd651438e311f.jpg',
      'https://i.pinimg.com/474x/4f/62/17/4f621710d6424668960c0a2faecc0202.jpg',
    ],
  },
];

export default characterimages;

在React Native中为图像创建JSON文件夹

2 个答案: