如何从ReactNative-App中的res/drawable-folder加载图像？

Question

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

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

<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应用程序中.

UPDATE

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

它是一个带有"react-native init"的标准RN-App,只是添加了一个图像以显示在drawable-folder(仅限android)中.

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

Answer 1

最后我明白了:<image>Tag需要具体的"width"和"height"参数作为属性,而不仅仅是style-parameter.

考虑到这一点,两个声明都将完美地运作:

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