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

【问题标题】：Creating a JSON Folder For Images in React Native在 React Native 中为图像创建 JSON 文件夹
【发布时间】：2019-09-04 03:21:15
【问题描述】：

我正在学习 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;

【问题讨论】：

标签： json react-native

【解决方案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"
      },
...

【讨论】：

感谢@hongdevelop。我对此有疑问，因为我也有同样的问题。你能帮忙吗？ stackoverflow.com/questions/57795649/…

【解决方案2】：

如果你有一个 URL 数组，你可以很容易地迭代：

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;

【讨论】：