从 JSON 文件获取本地存储的图像的路径 - React Native

Question

我一直在寻找一种从JSON 文件中获取本地存储在我的项目中的图像路径的方法。 我已经看到建议删除JSON 文件并在 .JS 文件中使用数组的答案，就像这样：

const DATA = [
   {
    "ID": 0,
    "Image": require('../assets/image0.png')
   },
   {
    "ID": 1,  
    "Image": require('../assets/image1.png')
   }
]

事情是我只能使用JSON 文件来获取我的数据，这是将Excel转换为JSON 文件的结果，仅此而已。 因此，假设我有一个data.json文件，如下所示：

{  
  "data": [
        {
            "ID": 0,
            "Image": "require('../assets/image0.png')"
        },
        {
            "ID": 1,  
            "Image": "require('../assets/image1.png')"
        }
    ]
}

目前，无法使用存储在“Image”属性中的路径作为<Image source = {}/>中的源来显示图像。 有人知道如何保存JSON文件并以某种方式获取并使用其中的路径吗？

编辑：

我的结构：

- assets
       - favicon.png // Image I want to display
       - icon.png // Image I want to display
- screens
       - File1.js // Where I want to display images
       - images.json // From where to get paths

文件1.js

 // Other imports
 import assets from "./images.json;
 require("../assets/favicon.png");
 require("../assets/icon.png");

const File1 = () => {
    return (
       <View>
        {assets.data.map((i) => (
            <Image
              source={{
                uri: require(i.Image.replace("require('", "").replace("')", ""))
              }}
              resizeMode="contain"
              style={styles.logo}
            />
          ))}
            {/*<Image source={require('../assets/favicon.png')}></Image> Its working but not above*/}
      </View>
    )
};

export default File1;

const styles = StyleSheet.create({
   logo: {
        height: 80
    },
});

图像.json

{
    "data": [
        {
            "ID": 0,
            "Image": "require('../assets/favicon.png')"
        },
        {
            "ID": 1,
            "Image": "require('../assets/icon.png')"
        }
    ]
}

但是得到：

TransformError src\screens\File1.js: src\screens\File1.js:Invalid call at line 323: require(i.Image.replace("require('", "").replace("')", ""))
- node_modules\react-native\Libraries\Utilities\HMRClient.js:320:31 in showCompileError
- node_modules\react-native\Libraries\Utilities\HMRClient.js:227:26 in client.on$argument_1
- node_modules\eventemitter3\index.js:181:21 in emit
- node_modules\metro\src\lib\bundle-modules\HMRClient.js:142:10 in _ws.onmessage
- node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\WebSocket\WebSocket.js:231:8 in _eventEmitter.addListener$argument_1
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Answer 1

您只需将路径存储在数组中，例如：

const images = {data : [
    {
        "ID": 0,
        "Image": "require('../assets/image0.png')"
    },
    {
        "ID": 1,  
        "Image": "require('../assets/image1.png')"
    }
]}

并在您的渲染组件中：

return (<>{
images.data.map(i => <Image source={require(i.Image.replace("require('", "").replace("')", ""))}/>)
}</>)