在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图标.您使用的任何其他可绘制资产应像以前一样放在相关的可绘制文件夹中.更多信息在这里.

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

不幸的是,drawable文件夹不能包含子目录.更多信息在这里.

此外,图像名称必须以字母开头,并且只能包含小写字母,数字或非字符字符.例如,请看这个.

然后你就可以像这样使用你的图像,没有扩展名:

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