javascript - 从 JSON 文件获取本地存储的图像的路径 - React Native
问题描述
我一直在寻找一种从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 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
解决方案
您只需将路径存储在数组中,例如:
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("')", ""))}/>)
}</>)
推荐阅读
- json - 错误:avro 解析和修改 json
- javascript - 在方法对象上循环 Pomise
- c++ - C++ MFC StretchDIBits PixelFormat8bppIndexed
- java - 如何将我给定的字符串转换为日期格式?
- php - php.ini request_order 安全问题
- c# - DefaultCellStyle 不适用
- command - 如何使用命令中心重命名动态输出
- pdf - Google 数据洞察导出为 PDF 和预定的电子邮件
- mongodb - MongoDB:文档何时更新
- verilog - 在 SystemVerilog 中检查 NaN 或 Inf