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

Run ok: <Image source={require('./src/image/honda-accord.png')} />

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

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

Image error was taked screen snapshot in android emulator:

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)

Thanks for all the help.

回答1:

React Native at the moment doesn't support dynamic require calls, i.e. you have to pass a complete constant string inside your require statement for it to work.

See this github issue for more details: https://github.com/facebook/react-native/issues/6391

来源：https://stackoverflow.com/questions/53898796/problem-when-use-dynamic-value-with-image-component-react-native

标签

react-native

react-native-android