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

网上很多公司公布了使用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的方式,尽管很麻烦,但是起码是可行的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,076评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,869评论 18 139
  • 每个人的气场都是宇宙,每个人都是自己的地球,自己的内心都是火山,区别只是这个火山是死的还是活的。 今天我闻到我内心...
    九儿杂文阅读 609评论 0 0
  • 其实主要是物理类网站,而且我在各种场合推荐过多次。 物理类 物理世界:http://physicsworld.co...
    ianwest阅读 5,256评论 5 102
  • 一年有且只有一次的旅行,我挺珍惜。况且是人生第一个年假,更觉得不能含糊。早早就开始计划今年要去哪儿,要干什么。想着...
    _尔也_阅读 473评论 4 1