如何在ReactNative应用程序中从res/drawable文件夹加载图像？

Question

如何在ReactNative应用程序中从res/drawable文件夹加载图像？

19

我想在ReactNative应用程序中显示来自res / drawable文件夹的静态图像。但是，没有任何内容显示。

我在android子文件夹中有以下文件夹结构：

macbook:CompanyApp hagen$ tree android/app/src/main/res/
android/app/src/main/res/
├── drawable
│   ├── a1456.jpg
│   └── a1457.jpg
├── mipmap-hdpi
│   └── ic_launcher.png
├── mipmap-mdpi
│   └── ic_launcher.png
├── mipmap-xhdpi
│   └── ic_launcher.png
├── mipmap-xxhdpi
│   └── ic_launcher.png
└── values
    ├── strings.xml
    └── styles.xml

6 directories, 8 files

如文档所述，我尝试使用以下代码从drawable文件夹加载图像文件:

<Image source={{uri: 'a1456'}} style={{width: 140, height: 140}} />

我也尝试了包含扩展名的文件名：

<Image source={{uri: 'a1456.jpg'}} style={{width: 140, height: 140}} />

还有：

<Image source={require('image!a1456')} style={{width: 140, height: 140, backgroundColor: 'yellow'}} />

我尝试了子文件夹：

<Image source={{uri: 'drawable/a1456.jpg'}} style={{width: 140, height: 140}} />

不会显示任何图像。例如，在我的当前文件夹中使用图像源内的require语句可以正常工作。

但是我正在寻找一种解决方案，以便像在真正的本机Android应用程序中一样使用可绘制图像。

更新

我刚刚在github上发布了一个示例项目：https://github.com/itinance/testdrawable

这是一个标准的RN-App，使用“react-native init”创建，并仅添加了一个要在drawable文件夹（仅限Android）中显示的图像。

有人能看一下并告诉我我做错了什么吗？

- itinance

5个回答

2

我也在尝试做这件事。使用的是RN 0.47.1 - 我想要这样做的原因是，我希望我的“加载”屏幕和我的着陆页面有一个图片在完全相同的位置，所以我希望该图片能够立即加载。

关于即时加载：将资源添加到js捆绑目录中的文件夹中需要时间来加载它。因此，我认为如果将其放在“res/drawable”（适用于Android）中，它应该已经被加载，因为它只是用于闪屏。我发现这是正确的，但会出现闪烁，我正在尝试避免这种情况。

然而，这里是有关如何在Android和iOS上加载本地图像的官方文档 - facebook.github.io :: React Native - Images From Hybrid App's Resources

If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.

For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
For images in the Android assets folder, use the asset:/ scheme:
<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.

是的，你发现需要设置宽度/高度是正确的。但在最新的RN版本中（我正在使用0.47.1），我们不能设置宽度/高度的属性，必须通过 style 来完成。

- Noitidart

嗨 Noitidart！我也想避免闪烁。只是好奇你是如何在启动画面前避免白屏闪烁的呢？ - Dhivakar Ragupathy

0

在import块中添加Image组件。

import { Platform, StyleSheet, Text, View, Image } from 'react-native';
在render的return块中添加Image标签。在Image标签中添加source属性，指定图像位置。同时我们还为Image标签添加了内联样式，以根据设备宽度设置图像大小。对于Android资产文件夹中的图像，请使用asset:/方案。

- sumit kumar pradhan

0

将图像保存在drawable文件夹中，然后您可以添加此代码。这对我有效。 <Image style={styles.imageStyle} source={ { uri: icon + `${Platform.OS === 'ios' ? '.jpg' : ''}` }} />

- Sachin Wakpaijan

0

示例项目结构 - 我的应用程序名称是MyProject

Myproject
├── ios
├── android
├── resource  //folder for static content
    └── image.png

使用位于资源目录中的图像

<Image style={{width: 16, height: 16}} source={require('./resource/image.png') }  />

希望能对你有所帮助！

- Dlucidone

正如我在问题中所提到的，我已经知道如何像你一样加载本地图片 :) 问题确切地说是如何在Android上使用具有设备相关尺寸（如hdpi，ldpi等）的位于drawable文件夹中的图像。 - itinance

您可以使用尺寸组件获取设备的宽度和高度，并根据需要传递图像。 - Dlucidone

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- itinance · Accepted Answer

最终我明白了：<Image> 标签需要具体的 "width" 和 "height" 属性作为参数，而不仅仅是样式参数。

有了这个想法，以下两种声明都可以完美地工作：

  <Image width={200} height={267} source={{uri: 'img_3665'}} style={{width: 200, height: 267}} />
  <Image width={200} height={267} source={require('image!img_3665')} style={{width: 200, height: 267}} />