React Native本地图像在Android上使用URI

Question

我搜索了许多资料，但还没有找到正确的解决方案。我已经通过在XCode项目中添加本地文件夹引用，并使用以下代码，在iOS上使用uri显示图像：

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

但是在 Android 上，我不太清楚应该把图片放在哪里以及如何在代码中引用它们。有些人说要在 android/app/src/main/res/drawable-hdpi 中添加一个名为“drawable-hdpi”的文件夹，但如果添加了该文件夹，则构建将失败。目前只有 mipmap 文件夹。

- Hasen

Answer 1

React Native的Image文档非常好！

静态图片

从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文件夹仅用于您的应用程序/启动器图标。您使用的任何其他绘图资产都应放置在相关的drawable文件夹中，就像以前一样。在这里了解更多信息。

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

不幸的是，drawable 文件夹不能包含子目录。 在这里了解更多信息。

此外，图像名称必须以字母开头，只能包含小写字母、数字或下划线字符。例如，请参见此处。

然后，您就可以像这样使用您的图像，不需要扩展名：

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

- Almouro

---

是的，我知道那个，但是使用URI也是可能的，而且对于我的目的来说我需要这样做。如果它在iOS上可以工作，为什么不能在Android上工作呢？文档清楚地说明URI也适用于本地文件。 - Hasen

图像文档说明可以使用URI与URL或静态文件，但没有说明如何在静态文件中使用它或提供任何示例。这似乎可以为我和许多其他人节省时间，因为我们不需要再在iOS和Android上询问如何操作。对于iOS来说，要获得答案非常困难，许多人似乎不知道如何操作，但实际上这是可以轻松完成的。对于独立图像，需要加载它是可以的，但对于动态图像来说就不行了，因为您无法在请求中包含字符串。 - Hasen

好的，它确实有效 - 我忘记删除扩展名了。说实话，使用URI在iOS和Android上显示本地图像的方法应该添加到文档中。这将节省很多麻烦。 - Hasen

忘记颁发你的悬赏了。我以为选择你作为正确答案会自动颁发它。 - Hasen

嗨@itinance，您的存储库对我有效，因此我认为您已经找到了问题，这可能是因为只有一个drawable文件夹而不是drawable-hdpi，drawable-mdpi...文件夹。 - Almouro