反应原生 json 图像答案

【问题标题】：react native json image反应原生 json 图像
【发布时间】：2018-11-23 16:23:16
【问题描述】：

我想将 JSON 图像作为变量打印出来。

这是我的本地 JSON 文件 (JsonData.json)：

  {
  "appetizer": [
    {
      "num": "appetizer1",
      "name": "salad",
      "condition": [ "1", "2" ],
      "image": "./appetizer/salad.png"
    },
    {
      "num": "appetizer2",
      "name": "soup",
      "condition": [ "2", "3" ],
      "image": "./appetizer/soup.png"
    },
    …
   ],

  "main": [
    {
      "num": "main1",
      "name": "beef",
      "condition": [ "1" ],
      "image": "./main/beef.png"   
    },
    {
      "num": "main2",
      "name":  "fish",
      "condition": [ "2", "3" ],
      "image": "./main/fish.png"     
    },
   …
  ]
}

我在 condition="2" 时过滤了名称。（沙拉、汤、鱼）

这是过滤名字的代码：

const newArray1 = [...JsonData["apptizer"], ...JsonData["main"]];
const JsonResult = newArray1.filter(item => {
  if(item.condition.indexOf("2") !== -1) return item.name;
});

我想在 condition="2" 时获取图像。

我怎样才能得到它们？我怎样才能打印出来？

我必须使用 base64 吗？如果是这样，你能告诉我如何使用它吗？看了解释，看不懂。

我以这种方式导入了 JSON 文件（我一直在正确使用它）：

var JsonData = require('./JsonData.json');

【问题讨论】：

你想要image和name吗？
是的。但不管是一码还是分码。
顺便说一句 images 存储在本地？看起来它们将从包中读取。
是的。我将图像存储在本地。

标签： json image react-native

【解决方案1】：

您可以使用以下代码：

    let mainObject = JSON.parse(JSON.stringify(data))
    let allKeys = Object.keys(mainObject)
    let finalObject = []
    allKeys.map((value, index) => {
        let array = mainObject[value]
        array.map((aryObject, aryIndex) => {
            let condition = aryObject['condition']
            if (condition.includes('2')) {
                finalObject.push(aryObject)
            }
        })
    })
    alert(JSON.stringify(finalObject))

您可以在屏幕顶部导入数据：

import { data } from './data';

您可以在 data.js 中添加以下文本：

export const data = {
    "appetizer": [
        {
            "num": "appetizer1",
            "name": "salad",
            "condition": ["1"],
            "image": "./appetizer/salad.png"
        },
        {
            "num": "appetizer2222",
            "name": "soup",
            "condition": ["2", "3"],
            "image": "./appetizer/soup.png"
        },
    ],
    "main": [
        {
            "num": "main1",
            "name": "beef",
            "condition": ["1"],
            "image": "./main/beef.png"
        },
        {
            "num": "main2",
            "name": "fish",
            "condition": ["21", "3"],
            "image": "./main/fish.png"
        },
    ]
}

【讨论】：

let mainObject = JSON.parse(JSON.stringify(data))
我会解析您添加到问题中的数据。
你可以把你的字符串解析进去。
感谢您的评论。但我无法理解。你指的是哪个字符串？
我说的是 JaonData.json

【解决方案2】：

您可以使用Object#values 获取与appetizer 和main 对应的数组，然后使用Array#flat 将嵌套对象提取到转换后的数组中。然后使用Array#filter（您已经在使用）根据您的条件仅过滤掉所需的对象，然后使用Array#map从每个过滤对象中获取name和image值到对象数组中.

请考虑以下片段

const jsonData = {"appetizer":[{"num":"appetizer1","name":"salad","condition":["1","2"],"image":"./appetizer/salad.png"},{"num":"appetizer2","name":"soup","condition":["2","3"],"image":"./appetizer/soup.png"}],"main":[{"num":"main1","name":"beef","condition":["1"],"image":"./main/beef.png"},{"num":"main2","name":"fish","condition":["2","3"],"image":"./main/fish.png"}]};

const filteredValues = Object.values(jsonData)
  .flat()
  .filter(o => o.condition.includes('2'))
  .map(({name, image}) => ({ name, image }));

console.log(filteredValues);

上述代码的输出将是一个具有以下结构的对象数组

[{
  "name": SOME_NAME,
  "image": SOME_PATH
 },
 {
  "name": SOME_NAME,
  "image": SOME_PATH
 },
 ...
]

您可以使用上面的数组来检索您的image 路径并相应地显示它。

我认为您不必担心base64，因为图像存储在本地，path 足以显示图像。

希望这会有所帮助！！！

旁注：您可以避免使用Array#flat 部分，因为您已经手动完成了[...JsonData["apptizer"], ...JsonData["main"]] 但flat 会很方便，以防jsonData 中有更多需要的键可以考虑。

【讨论】：