我搜索了四周，并没有完全找到正确的解决方案。我有添加本地文件夹参考XCode项目后显示图像上使用下面的代码iOS的URI没有问题的应用程序：在Android上使用URI反应本机本地图像

<Image style={styles.catimg} source={{uri: "imgs/1.png"}} />

但在Android上，我不能完全弄清楚哪里放图像和如何在代码中引用它们。有些人说过在android/app/src/main/res/drawable-hdpi中有一个名为'drawable-hdpi'的文件夹，但是如果这个文件夹被添加到那里，构建失败。目前只有mipmap文件夹。

2016-04-16 Hasen

React Native Image doc非常好！

静态图像

由于发生反应原住民0.14，他们建议使用静态图像，像这样：

<Image style={styles.catimg} source={require("./imgs/1.png")} />

这里有一些好处，您将获得：

同一系统上的iOS和Android系统。
图像与您的JS代码位于相同的文件夹中。组件是独立的。
没有全局名称空间，即您不必担心名称冲突。
只有实际使用的图像才会打包到您的应用中。
添加和更改图像不需要重新编译应用程序，只需像平常一样刷新模拟器即可。
包装商知道图像尺寸，不需要在代码中复制它。
图像可以通过npm包分发。

图片来自本机侧

但是，您可能仍然想使用来自本机端的图像，如果例如，你正在建设一个混合的应用程序（一些用户界面的阵营本土，一些用户界面的平台代码）。

在Android上，确实会从android/app/src/main/res/drawable-*文件夹中读取图像。

当您创建新的React Native应用程序时，仅存在mipmap文件夹。 mipmap文件夹仅适用于您的应用/启动器图标。您使用的任何其他可绘制资产应该像以前一样放置在相关的可绘制文件夹中。 More info here。

因此，您需要创建至少一个drawable文件夹，比如android/app/src/main/res/drawable-hdpi，然后将您的图像imgs_1.png放入其中。

不幸的是，drawable文件夹不能包含子目录。 More info here。

此外，图像名称必须以字母开头，并且只能包含小写字母，数字或非内核字符。例如，See this。

然后你就可以用你的形象就是这样，不带扩展名：

<Image style={styles.catimg} source={{uri: "imgs_1"}} />

来源

2016-04-17 13:58:55 Almouro

是的，我知道这一点，但它也可以使用URI和我的目的，我需要在这里。如果它适用于iOS，为什么它不适用于Android？它在文档中明确指出URI也适用于本地文件。 – Hasen

@Hasen好吧，我更新了我的答案！正如你所看到的，这种方法在Android上有一些缺点，所以我可能想知道你的具体需求是什么？也许有另一种方式使它的工作:) – Almouro

图像文档指出，您可以使用URI与URL或静态文件，但它没有说明如何使用它与静态文件或给任何例子。这样可以节省我和其他许多人看起来要求的，如何在iOS中完成，然后再在Android中完成。 iOS也很难得到答案，很多人似乎并不知道如何去做，但实际上它可以做到没有问题。要求图像适用于独立的图像，但对于动态而言，它不好，因为您无法在请求中包含字符串。 – Hasen

在Android上使用URI反应本机本地图像

回答

静态图像

图片来自本机侧

相关问题