android - 如何在 React Native-App 中从 res/drawable-folder 加载图像？

Question

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

我在 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: '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-statement 工作正常。

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

更新

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

这是一个带有“react-native init”的标准 RN-App，只是添加了一个图像以显示在 drawable-folder 中(仅限 android)。

有人可以看看它并告诉我我做错了什么吗？

Answer 1

我终于明白了:<Image>标签需要具体的“宽度”和“高度”参数作为属性，而不仅仅是作为样式参数。

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

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