在Android上使用URI反应原生本地图像 [英] React Native local images with URI on Android

问题描述

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

I've searched around and haven't quite found the correct solution for this. I have the app displaying images no problem with uri on iOS using the following code after adding a local folder reference to the XCode project:

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

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

But on Android I can't quite figure out where to put the images and how to reference them in the code. Some people have said about a folder called 'drawable-hdpi' in android/app/src/main/res/drawable-hdpi but the build fails if this folder is added there. At the moment there are mipmap folders only.

推荐答案

React Native 图片文档非常好！

The React Native Image doc is pretty good!

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

As of React Native 0.14, they recommend using static images like so:

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

以下是一些好处：

1. iOS和Android上的相同系统。


2. 图像与JS代码位于同一文件夹中。组件是自包含的。


3. 没有全局命名空间，即您不必担心名称冲突。


4. 仅实际使用的图像将被打包到您的应用程序中。


5. 添加和更改图像不需要重新编译应用程序，只需像往常一样刷新模拟器。


6. packager知道图像尺寸，不需要在代码中复制它。


7. 图像可以通过npm包发布。

1. Same system on iOS and Android.
2. Images live in the same folder as your JS code. Components are self-contained.
3. No global namespace, i.e. you don't have worry about name collisions.
4. Only the images that are actually used will be packaged into your app.
5. Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do.
6. The packager knows the image dimensions, no need to duplicate it in the code.
7. Images can be distributed via npm packages.

来自原生方的图片

但是，您可能仍想使用原生图像，例如，您正在构建混合应用程序（React Native中的一些UI，平台代码中的一些UI）。

Images From Native side

However, you might still wanna use an image from the native side, if for instance, you are building a hybrid app (some UIs in React Native, some UIs in platform code).

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

On Android, the images will indeed be read from the android/app/src/main/res/drawable-* folders.

当您创建新的React Native应用程序时，只有 mipmap 文件夹存在。 mipmap文件夹仅适用于您的app / launcher图标。您使用的任何其他可绘制资产应像以前一样放在相关的可绘制文件夹中。 此处提供更多信息。

When you create a new React Native app, only the mipmap folders are present. The mipmap folders are for your app/launcher icons only. Any other drawable assets you use should be placed in the relevant drawable folders as before. More info here.

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

So you need to create at least one drawable folder, say android/app/src/main/res/drawable-hdpi, then place your image imgs_1.png in it.

不幸的是， drawable 文件夹不能包含子目录。 此处提供更多信息。

Unfortunately, the drawable folders cannot contain subdirectories. More info here.

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

Moreover, the image name must start with a letter, and can only contain lowercase letters, numbers or the undescore character. See this, for example.

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

Then you'll be able to use your image like this, without the extension:

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

这篇关于在Android上使用URI反应原生本地图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！