I'd like to display static images from res/drawable-folder in a ReactNative-App. However, there's nothing displayed.
我想在一个反应程序中显示来自res/drawable文件夹的静态图像。然而,没有显示出来。
I have the following folder structure in the android-subfolder:
android-sub - folder我有以下文件夹结构:
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
As mentioned in the documentation, i try to load the image-files from drawable-folder with the following code:
正如文档中提到的，我试着用下面的代码从drawable文件夹加载图像文件:
<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}} />
and also:
还有:
<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.
不会显示图像。例如，在当前文件夹中为本地映像使用一个require-statement可以正常工作。
But i am looking for a solution to consume the drawable-images like within a real native android application.
但是我正在寻找一个解决方案来使用可绘制的图像，就像在真正的android应用程序中一样。
UPDATE
更新
I just published an example project on github: https://github.com/itinance/testdrawable
我刚刚在github上发布了一个示例项目:https://github.com/itinance/testdrawable。
It is a standard RN-App with "react-native init" and just added an image to display in drawable-folder (android only).
它是一个标准的RN-App，带有“原始的init”，只是添加了一个显示在drawable-folder (android only)中的图像。
Can someone have a look at it and tell me what i am doing wrong?
能不能有人看看，告诉我我做错了什么?
6 个解决方案
#1
9
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}} />
#2
1
Sample project structure- my app name is MyProject
示例项目结构——我的应用程序名称是MyProject。
Myproject
├── ios
├── android
├── resource //folder for static content
└── image.png
To use image residing in resource directory
使用资源目录中的映像
<Image style={{width: 16, height: 16}} source={require('./resource/image.png') } />
Hope it will help!
希望它能帮助!
#3
0
Save images in drawable folder then you can add this code. This works for me. <Image style={styles.imageStyle} source={ { uri: icon + `${Platform.OS === 'ios' ? '.jpg' : ''}` }} />
将图像保存到可绘制文件夹中，然后可以添加此代码。这适合我。 <图片风格= {风格。imageStyle} source="{{{uri:" icon + ' ${平台。ios操作系统="=" = ?“.jpg”:“}” />。
#4
0
I am also trying to do this. Am using RN 0.47.1 - reason I want this, is because I want to have the "loading" screen and my landing page have an image in the exact same spot, so I want the image to load instantly.
我也在尝试这么做。我使用RN 0。47.1——我这么做的原因是，我想要有“加载”屏幕，我的着陆页面有一个图像在相同的位置，所以我想要图像立即加载。
Re instant loading: Adding the resource within the folder in my js bundled directories, is taking time to load it. So I thought that if I put it in "res/drawable" (for Android) it should already be loaded as it just used it for the splash. I have found this is true, however there is a blink, I am trying to avoid that blink.
重新立即加载:在我的js绑定目录的文件夹中添加资源，需要时间来加载它。所以我想，如果我把它放到“res/drawable”(Android)中，它应该已经被加载了，因为它只是用于启动。我发现这是真的，但是有一个闪烁，我正在努力避免那个闪烁。
However here is the official docs on how to load local images on Android and iOS - facebook.github.io :: React Native - Images From Hybrid App's Resources
不过，这里有一份官方文件，介绍如何在Android和iOS - facebook.github上加载本地图像。io:对来自混合应用资源的本地图片做出反应
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.
如果您正在构建一个混合应用程序(在React Native中有一些ui，在platform代码中有一些ui)，您仍然可以使用已经绑定到应用程序中的图像。
For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:
对于通过Xcode asset catalogs或Android drawable文件夹包含的图像，使用没有扩展名的图像名:
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />For images in the Android assets folder, use the asset:/ scheme:
对于Android assets文件夹中的图像，使用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.
这些方法不提供安全检查。由您来保证这些映像在应用程序中是可用的。您还必须手动指定图像尺寸。
So yes, your discovery of having to set the width/height is true. In latest RN though (i am using 0.47.1) we can't set props of width/height, it has to be done via style.
是的，你发现必须设置宽度/高度是正确的。在最新的RN中(我用的是0.47.1)我们不能设置宽度/高度的道具，必须通过样式来完成。
#5
0
-
Add Image Component in import block.
在导入块中添加图像组件。
import { Platform, StyleSheet, Text, View, Image } from 'react-native';
从“response -native”导入{Platform, StyleSheet, Text, View, Image};
-
Add Image tag in render’s return block. Source attribute in Image tag, where we are specifying the image location. Also we have added inline style to Image tag, that helps to set the image size as per the device width. For images in the Android assets folder, use the asset:/ scheme
在渲染的返回块中添加图像标签。源属性在图像标记中，在这里我们指定图像位置。我们还为Image标签添加了内联样式，这有助于根据设备宽度设置图像大小。对于Android assets文件夹中的图像，使用asset:/ scheme
#6
-2
If you want to show images from drawable folder of android in react-native. Here is the solution:
如果你想要显示来自android的可绘制文件夹的图像，请在“反应物-native”中显示。这是解决方案:
First create the drawable folder in the desired location of android folder and paste the image in that folder.
首先在android文件夹的期望位置创建可绘制文件夹，并将图像粘贴到该文件夹中。
Second set the path as done below, the image will perfectly set in your app as per your style.
第二步设置如下所示的路径，在你的应用程序中，图像将按照你的风格完美地设置。
<ImageBackground style = {{flex: 1, height: null, width: null}}
source={require('./android/app/src/main/res/drawable/backimage.jpg')}/>
#1
9
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}} />
#2
1
Sample project structure- my app name is MyProject
示例项目结构——我的应用程序名称是MyProject。
Myproject
├── ios
├── android
├── resource //folder for static content
└── image.png
To use image residing in resource directory
使用资源目录中的映像
<Image style={{width: 16, height: 16}} source={require('./resource/image.png') } />
Hope it will help!
希望它能帮助!
#3
0
Save images in drawable folder then you can add this code. This works for me. <Image style={styles.imageStyle} source={ { uri: icon + `${Platform.OS === 'ios' ? '.jpg' : ''}` }} />
将图像保存到可绘制文件夹中，然后可以添加此代码。这适合我。 <图片风格= {风格。imageStyle} source="{{{uri:" icon + ' ${平台。ios操作系统="=" = ?“.jpg”:“}” />。
#4
0
I am also trying to do this. Am using RN 0.47.1 - reason I want this, is because I want to have the "loading" screen and my landing page have an image in the exact same spot, so I want the image to load instantly.
我也在尝试这么做。我使用RN 0。47.1——我这么做的原因是，我想要有“加载”屏幕，我的着陆页面有一个图像在相同的位置，所以我想要图像立即加载。
Re instant loading: Adding the resource within the folder in my js bundled directories, is taking time to load it. So I thought that if I put it in "res/drawable" (for Android) it should already be loaded as it just used it for the splash. I have found this is true, however there is a blink, I am trying to avoid that blink.
重新立即加载:在我的js绑定目录的文件夹中添加资源，需要时间来加载它。所以我想，如果我把它放到“res/drawable”(Android)中，它应该已经被加载了，因为它只是用于启动。我发现这是真的，但是有一个闪烁，我正在努力避免那个闪烁。
However here is the official docs on how to load local images on Android and iOS - facebook.github.io :: React Native - Images From Hybrid App's Resources
不过，这里有一份官方文件，介绍如何在Android和iOS - facebook.github上加载本地图像。io:对来自混合应用资源的本地图片做出反应
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.
如果您正在构建一个混合应用程序(在React Native中有一些ui，在platform代码中有一些ui)，您仍然可以使用已经绑定到应用程序中的图像。
For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:
对于通过Xcode asset catalogs或Android drawable文件夹包含的图像，使用没有扩展名的图像名:
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />For images in the Android assets folder, use the asset:/ scheme:
对于Android assets文件夹中的图像，使用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.
这些方法不提供安全检查。由您来保证这些映像在应用程序中是可用的。您还必须手动指定图像尺寸。
So yes, your discovery of having to set the width/height is true. In latest RN though (i am using 0.47.1) we can't set props of width/height, it has to be done via style.
是的，你发现必须设置宽度/高度是正确的。在最新的RN中(我用的是0.47.1)我们不能设置宽度/高度的道具，必须通过样式来完成。
#5
0
-
Add Image Component in import block.
在导入块中添加图像组件。
import { Platform, StyleSheet, Text, View, Image } from 'react-native';
从“response -native”导入{Platform, StyleSheet, Text, View, Image};
-
Add Image tag in render’s return block. Source attribute in Image tag, where we are specifying the image location. Also we have added inline style to Image tag, that helps to set the image size as per the device width. For images in the Android assets folder, use the asset:/ scheme
在渲染的返回块中添加图像标签。源属性在图像标记中，在这里我们指定图像位置。我们还为Image标签添加了内联样式，这有助于根据设备宽度设置图像大小。对于Android assets文件夹中的图像，使用asset:/ scheme
#6
-2
If you want to show images from drawable folder of android in react-native. Here is the solution:
如果你想要显示来自android的可绘制文件夹的图像，请在“反应物-native”中显示。这是解决方案:
First create the drawable folder in the desired location of android folder and paste the image in that folder.
首先在android文件夹的期望位置创建可绘制文件夹，并将图像粘贴到该文件夹中。
Second set the path as done below, the image will perfectly set in your app as per your style.
第二步设置如下所示的路径，在你的应用程序中，图像将按照你的风格完美地设置。
<ImageBackground style = {{flex: 1, height: null, width: null}}
source={require('./android/app/src/main/res/drawable/backimage.jpg')}/>