将动态值与图像组件一起使用时发生问题

Question

我从数据库中获取数据并将其放入源映像中，这将是错误的，但是如果我只输入字符串，它将运行正常

运行正常：<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

图像错误是在Android模拟器中拍摄的屏幕快照：

然后在控制台上登录日志猫：

  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)

感谢所有帮助。

Answer 1

React Native目前不支持动态的require调用，即您必须在require语句内传递一个完整的常量字符串才能使其正常工作。

有关更多详细信息，请参见此github问题：https://github.com/facebook/react-native/issues/6391

Answer 2

您需要在数组中提供源，以便React Native可以动态显示图像。 在carOfPerson数组中，需要链接到图像

您将拥有[require（'img1'），require（'img2'）]而不是['img1'，'img2']