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

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

如果你有一个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;