美文网首页Android知识Android开发Android技术知识
混合开发的大趋势之一React Native之Image

混合开发的大趋势之一React Native之Image

作者: 王亟亟 | 来源:发表于2016-10-09 18:02 被阅读388次

    文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路

    国庆这些天要么旅游要么WOW,感觉整个人都废了。。

    直接从黄种人晒成了非洲大酋长。。然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整完后今天下午抽出时间继续学习,然后就补一篇RN 主件的文章,知识点源于官方文档

    原文地址:https://github.com/facebook/react-native/blob/master/docs/Images.md

    效果图

    第一种为:加载RN项目下的图片

    第二种为:加载网络图片

    第三种为:加载Android项目的图片资源+图片作为背景


    加载RN项目下的图片

    如果你需要引用RN项目目录下的图片资源,就像使用html中的引用一样,使用相对路径去找

    目录如下

    在我们的android.js同级有一个img文件夹,里面有一个sample.jpg文件,而它就是我们所需要的

    source={require('./img/sample.jpg')}/>

    这样就可以使用到我们的图片了给source属性利用require()给其传第一个图片地址,然后就可以渲染到上

    当然有时候你的值是可变的,那也可以传入一个对象去引用,如

    但是以上写法不是很好,我们尽量在渲染的时候给出正确的引用值,可以这样:

    一般来说我们的图片资源本身大小不可控,所以我们会给控件预设一个尺寸,像这样


    加载网络图片

    我们的APP不可能是一个纯离线产品,那网络图片就是必不可少,RN加载图片就比远程环境方便,给出正确的UR,就和网页加载图片一样

    还是和家在本地图片一样,官方希望大家给定控件的尺寸。

    因为你的图片尺寸不可控,当加载出来后把用户第一次看到的布局给整变形了,这是一个很不好的用户体验。

    Note:这里补充下 我们的uri属性 是 object 类型的。


    加载Android项目的图片资源

    那既然可以加载RN项目里的图片,必然也可以加载android项目下的图片,加载方式大同小异

    唯一区别就是 在值里加一个imge!文件名,不需要后缀哦!


    相关文章

      网友评论

        本文标题:混合开发的大趋势之一React Native之Image

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