将原始图像反应为未找到的字符串

时间:2016-01-20 09:10:20

标签: ios image react-native

这很好用:

<Image source={require('./imgs/animage.jpg')}></Image>

这会返回错误:

var theimage = './imgs/animage.jpg';

<Image source={require(theimage)}></Image>

返回的错误是:

“需要未知模块'。/ imgs /animage.jpg'。如果您是模块,请尝试重启包”

真的不知道问题是什么。

这有效:

var theimage = require('./imgs/animage.jpg');

但这仍然没有:

var theimage = 'animage';
var theimage = require('./imgs/' + theimage + '.jpg');

我看不到任何动态生成图片的方法。

2 个答案:

答案 0 :(得分:2)

你是对的。新资产系统(以及旧要求('image!xyz'))仅适用于静态图像。这是因为所有图像路径都是在构建步骤中静态计算出来的,而不运行程序。此时构建系统不知道变量。

所以你必须使用

<Image source={{uri: theimage}}></Image>

但URI可以有文件夹。为了在每次构建期间始终将最新的资源文件夹编译到应用程序中,您需要在Xcode项目中创建文件夹链接而不是组。组仅包含创建组时存在的文件。文件夹链接反映该文件夹的实际内容。 例如。您的项目中有一个名为 images 的文件夹。在背景文件夹中有一个文件 my_background.jpg 。您将 images 添加为项目的文件夹引用。然后你可以使用

{uri: 'images/backgrounds/my_background.jpg'}

答案 1 :(得分:0)

出于某种原因,上述编码似乎无法实现。这是我找到的一个解决方案:

var theimage = 'animage.jpg';

<Image source={{uri: theimage}}></Image>

所有图像都必须添加到xcode项目中。这样,它们的位置不能被文件夹分隔。