如何在ReactNative-App中从res/drawable-folder加载图像? [英] How to load images from res/drawable-folder in ReactNative-App?

问题描述

我想在ReactNative-App中显示来自res/drawable-folder的静态图像.但是，没有任何显示.

I'd like to display static images from res/drawable-folder in a ReactNative-App. However, there's nothing displayed.

我在android-子文件夹中具有以下文件夹结构:

I have the following folder structure in the android-subfolder:

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-folder加载图像文件:

As mentioned in the documentation, i try to load the image-files from drawable-folder with the following code:

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

我还尝试了文件名和扩展名:

I also tried the filename together with the extension:

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

还有:

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

然后我尝试了子文件夹:

And i tried the subfolder:

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

将不显示图像. 例如，在图像源内对当前文件夹中的本地图像使用需求声明可以正常工作.

No image will be displayed. Using a require-statement within image source for a local image in my current folder for instance is working fine.

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

But i am looking for a solution to consume the drawable-images like within a real native android application.

更新

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

I just published an example project on github: https://github.com/itinance/testdrawable

这是带有"react-native init"的标准RN-App，只是添加了要在可绘制文件夹中显示的图像(仅适用于Android).

It is a standard RN-App with "react-native init" and just added an image to display in drawable-folder (android only).

有人可以看看并告诉我我做错了吗?

Can someone have a look at it and tell me what i am doing wrong?

推荐答案

最后，我明白了:<image>标签需要将具体的"width"和"height"参数作为属性，而不仅是样式参数.

Finally i got it: the <image> Tag needs concrete "width" and "height" arguments as attributes, not only as style-parameter.

考虑到这一点，两个声明将完美地起作用:

With that in mind, both declarations will work perfectly:

  <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}} />

这篇关于如何在ReactNative-App中从res/drawable-folder加载图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！