美文网首页
RN研发记(三):<Image>标签加载本地图片

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

作者: tengxp | 来源:发表于2017-08-04 21:19 被阅读556次

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

相关文章

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

    网上很多公司公布了使用RN的一些经验,目前看来大多数公司还是将RN作为单独页面嵌入到原生程序当中,至于为何没有完全...

  • WebView使用大全(暂未完结)

    加载带有html标签的json字符串 效果加载html标签的json.png 加载本地图片

  • 从零学React Native之08Image组件

    开发过程中, 几乎每个项目都会用到图片.RN就是通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源...

  • 从本地打bundle的方式来显示我们的react native页

    本篇文章主要介绍Android项目是如何加载本地的RN页面,本地的RN页面这个概念有点类似于本地HTML静态网页,...

  • RN图片加载和原生统一

    RN图片加载和原生统一 针对RN和原生混合开发的项目,由于图片的加载RN有自己的一套机制,跟原生的是分开的,就存在...

  • RN 加载图片

    本地图片 网络图片 Android上运行效果图: 或者参数传递的方式 注意source = {pic} 是单引号

  • 微信小程序-image(图片)

    在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 加载网络图片 加载本地图片 加载网络图片 微信...

  • React Native组件学习之Image

    Demo展示 上面是去加载网络图片,下面是加载本地图片 加载图片的几种方式 加载本地图片从项目中加载图片(一般是会...

  • 图片预加载

    定义:图片预先加载到浏览器中,即先让图片下载到本地,然后在继续执行后续的操作 js实现图片预加载 进度条:h5新标签

  • iOS SDWebImage 加载GIF图片没效果

    //加载本地GIF图片 //加载网络GIF图片 (SDWebImage 4.0 之前) //加载网络GIF图片(S...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/ycmblxtx.html