RN研发记(三):<Image>标签加载本地图片

2017-08-04  本文已影响556人  tengxp

网上很多公司公布了使用RN的一些经验,目前看来大多数公司还是将RN作为单独页面嵌入到原生程序当中,至于为何没有完全切换到RN,个中原因,还不是很明了。
作为一个初学者,只针对技术本身,还是希望能亲身体验一下使用RN完全开发一款应用,会存在哪些问题。
如果完全使用RN开发,我觉得有一点肯定是绕不过去的,那就是RN与Native程序中资源的共享,目前看,Native想使用RN中的资源(如:图片)好像是不可能的。而如果RN也不能使用Native程序中的图片,那么在开发过程中就会有非常大的限制。
在网上找了很多资料,包括React Native中文网上介绍的,<Image>标签加载图片的方式只有三种:

<Image source={require('./img/icon.jpg')}/>

使用相对路径加载RN工程中的图片资源

<Image source={{uri: 'http://..................*.jpg'}}/>

使用url地址加载网上的图片资源

<Image source={{uri: 'ic_launcher'}}/>

加载Native程序中drawable目录下的图片资源

但是如何加载Native程序下载到本地的图片呢,或者是/data/data/下应用自己的缓存文件呢,找了很多资料都没看到,实际上很简单,使用下面的方式就可以了:

<Image source={{uri: 'file://' + path}}/>

path即为本地图片文件的绝对路径

至此,就找到了一种共享本地图片资源到RN的方式,尽管很麻烦,但是起码是可行的。

上一篇下一篇

猜你喜欢

热点阅读