美文网首页
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>标签加载本地图片

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