在这篇文章中Android React Native的使用细节问题提到了 图片使用的问题,也提到了无论用哪种方法都不能加载app内部的图片资源的问题,当时的代码是这样子的
- 1
- 1
在官方文档中也是这么写的Image
但是在另一个页文档中却与其相矛盾的,Images,估计这页文档刚加入不久
也就是说正确的app内部图片加载姿势应该如下
- 1
- 1
当然图片要存在res的drawable目录下,记住uri对应的图片名称是不包含后缀的。这样图片能够被正确加载并且显示出来。
该文章中还提到加载静态图片资源(该方式还存在问题,加载不进来)
我在index.Android.js同目录下扔了一张名为icon.png的图片,然后使用该方式加载
- 1
- 1
结果是图片并没有加载进来,但是也不报错。姑且不理会它,反正目前版本还不稳定,等正式稳定下来再说。总之现在去学React Native就是一个填坑的过程。
再如果要加载手机存储卡上的图片资源,其方式也很简单,假设我现在要加载sdcard根目录下的icon.png。对应的代码如下
- 1
- 1
可以看到使用了file://加上文件的路径/sdcard/icon.png进行加载,当然你还需要加入对应的权限。这样图片就能正确加载了。
网络图片就不说了,之前那篇文章中就已经提到了
- 1
- 1
也就是说,目前为止就是静态资源加载不了,这也是个bug,将来的某个版本肯定会修复的,临时的解决方法见https://github.com/WoLfulus/react-native/commit/33e2d052b6e2e3e6b3595572abbc3cb9b66d5755
打开node_modules\React-native\Libraries\Image\resolveAssetSource.js文件,将
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
修改为
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
这时候你再使用
- 1
- 1
就可以正常的加载并显示静态图片资源的了。
文章写作时,React Native Android的版本是0.14.2,开发环境为win 7 X64,相信不久的将来,这些问题都会被一一修复。