使用动态值与图像组件反应原生时的问题 [英] Problem when use dynamic value with image component react native

问题描述

我从数据库中获取数据并将其放入源图像中，它会出错，但如果我只放入字符串，它会运行正常

I get data from DB and put it into source image, it will be error, but if i put only string it will run ok

运行正常:<Image source={require('./src/image/honda-accord.png')}/>

运行失败:<Image source={require("./src/image/" + carOfPerson[0]["cars"][i]["picture"] + "")}/>

carOfPerson[0]["cars"][i]["picture"] 的值为 honda-accord.png

Value of carOfPerson[0]["cars"][i]["picture"] is honda-accord.png

在安卓模拟器中截取屏幕快照时出现图像错误:

Image error was taked screen snapshot in android emulator:

和控制台登录 log cat:

And console log in log cat:

  Body:
{"type":"TransformError","lineNumber":0,"errors":[{"description":"App.js: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")","lineNumber":0}],"name":"SyntaxError","message":"App.js: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")","stack":"Error: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")\n    at F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:247:19\n    at Generator.next (<anonymous>)\n    at step (F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:40:30)\n    at F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:51:15"}
    at com.facebook.react.devsupport.BundleDownloader.processBundleResult(BundleDownloader.java:296)
    at com.facebook.react.devsupport.BundleDownloader.access$200(BundleDownloader.java:37)
    at com.facebook.react.devsupport.BundleDownloader$1.onResponse(BundleDownloader.java:174)
    at okhttp3.RealCall$AsyncCall.execute(RealCall.java:153)
    at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
    at java.lang.Thread.run(Thread.java:764)

感谢大家的帮助.

推荐答案

您需要在数组中 require 源，以便 React Native 可以动态显示您的图像.在 carOfPerson 数组中需要图片链接

You need to require the source in the array so that React Native can display your images dynamically. In carOfPerson array requires the link to the images

代替 ['img1', 'img2']，您将拥有 [require('img1'), require('img2')]

instead of ['img1', 'img2'], you will have [require('img1'), require('img2')]

这篇关于使用动态值与图像组件反应原生时的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！