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

我想在本机应用程序中显示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

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

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

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

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

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

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

而且：

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

我尝试了子文件夹：

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

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

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

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

更新

我刚刚在github上发布了一个示例项目：

这是一款带有“react native init”的标准RN应用程序，只是添加了一个图像以显示在drawable文件夹中（仅限android）

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

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

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

使用驻留在资源目录中的映像

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

---

希望这会有帮助

我终于明白了：

标记需要具体的“宽度”和“高度”参数作为属性，而不仅仅是样式参数

考虑到这一点，这两种声明都将非常有效：

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

---

我也在尝试这样做。我使用RN 0.47.1-我之所以要这样做，是因为我希望“加载”屏幕和我的登录页在完全相同的位置上有一个图像，所以我希望立即加载图像

重新即时加载：在my js捆绑目录的文件夹中添加资源需要时间来加载。所以我想如果我把它放在“res/drawable”（对于Android）中，它应该已经被加载了，因为它只是用它来启动。我发现这是真的，但有一个眨眼，我试图避免眨眼

不过，以下是关于如何在Android和iOS上加载本地图像的官方文档-

如果您正在构建一个混合应用程序（一些UI在React Native中，一些UI在平台代码中），您仍然可以使用已经捆绑到应用程序中的图像

对于通过Xcode资产目录或Android drawable文件夹包含的图像，请使用不带扩展名的图像名称：

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

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

对于Android资产文件夹中的图像，请使用资产：/scheme：

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

这些方法不提供安全检查。由您来保证这些图像在应用程序中可用。此外，还必须手动指定图像尺寸

---

因此，是的，您发现必须设置宽度/高度是正确的。不过在最新的RN中（我使用的是0.47.1），我们无法设置宽度/高度的道具，必须通过

样式
将图像保存在drawable文件夹中，然后您可以添加此代码。这对我有用。

在导入块中添加图像组件

进口{
平台，
样式表，
文本，
看法
形象
}从“反应本机”

在渲染的返回块中添加图像标记。
图像标记中的Source属性，其中指定图像位置。
此外，我们还为图像标签添加了内联样式，这有助于根据设备宽度设置图像大小。
对于Android资产文件夹中的图像，请使用资产：/scheme

正如我在问题中所写的，我已经知道如何像您一样加载本地图像：）问题就是，如何使用放置在可绘制文件夹中的图像，这些文件夹具有设备相关的维度，如hdpi，Android上的ldpi等。你们可以使用dimensions组件来获取设备的宽度和高度，并根据需要传递图像。这个解决方案对我不适用。我已经在drawable文件夹中复制了我的图像，并尝试使用这两种方法进行访问，但都不起作用。使用
软件包管理器显示模块图像时出现500个错误！img_3665未被发现也不为我工作。当我设置宽度/高度时，它会给我警告，并告诉我将其设置为样式。您知道如何从mdpi文件夹加载图像吗？不是从可绘制文件夹中？嗨，Noitidart，连我都不想眨眼。只是想知道你是如何在启动屏幕前避开白色屏幕眨眼的？