Warm tip: This article is reproduced from stackoverflow.com, please click
javascript react-native jsx

React Native

发布于 2020-03-27 10:31:33

I'm currently building a test app using React Native. The Image module, thus far has been working fine.

For example, if I had an image named avatar, the below code snippet works fine.

<Image source={require('image!avatar')} />

But but if I change it to a dynamic string, I get

<Image source={require('image!' + 'avatar')} />

I get the error:

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

Obviously this is a contrived example, but dynamic image names are important. Does React Native not support dynamic image names?

React native error with dynamic image name

Questioner
Shaheen Ghiassy
Viewed
94
Colin Ramsay 2015-06-16 20:50

This is covered in the documentation under the section "Static Resources":

The only allowed way to refer to an image in the bundle is to literally write require('image!name-of-the-asset') in the source.

// GOOD
<Image source={require('image!my-icon')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

However you also need to remember to add your images to an xcassets bundle in your app in Xcode, though it seems from your comment you've done that already.

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets