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

Question

我已经四处寻找并且还没有找到正确的解决方案。在将本地文件夹引用添加到XCode项目后，我使用以下代码在iOS上显示图像没有问题：

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

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

Answer 1

React Native Image doc非常棒！

静态图片

从React Native 0.14开始，他们建议使用静态图像：

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

以下是您获得的一些好处：

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

原生方面的图像

但是，您可能仍希望使用本机方面的图像，例如，您正在构建混合应用程序（React Native中的某些UI，平台代码中的某些UI）。

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

创建新的React Native应用程序时，仅存在mipmap个文件夹。 mipmap文件夹仅适用于您的app / launcher图标。您使用的任何其他可绘制资产应像以前一样放在相关的可绘制文件夹中。 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"}} />