混合开发的大趋势之一React Native之Image (脑动理解)
文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路
国庆这些天要么旅游要么WOW,感觉整个人都废了。。
直接从黄种人晒成了非洲大酋长。。然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整完后今天下午抽出时间继续学习,然后就补一篇RN 主件的文章,知识点源于官方文档
原文地址:https://github.com/facebook/react-native/blob/master/docs/Images.md
效果图
第一种为:加载RN项目下的图片
第二种为:加载网络图片
第三种为:加载Android项目的图片资源+图片作为背景
加载RN项目下的图片
如果你需要引用RN项目目录下的图片资源,就像使用html中的引用一样,使用相对路径去找
目录如下
在我们的android.js同级有一个img文件夹,里面有一个sample.jpg文件,而它就是我们所需要的
<Image source = {require('./img/sample.jpg')}/>
这样就可以使用到我们的图片了给 source
属性利用require()给其传第一个图片地址,然后就可以渲染到<Image/>
上
当然有时候你的值是可变的,那也可以传入一个对象去引用,如
var icon = this.props.active ? 'sample' : 'sample1';
<Image source={require('./' + icon + '.png')} />
但是以上写法不是很好,我们尽量在渲染的时候给出正确的引用值,可以这样:
var icon = this.props.active ? require('./sample.png') : require('./sample1.png');
<Image source={icon} />
一般来说我们的图片资源本身大小不可控,所以我们会给控件预设一个尺寸,像这样
<Image source = {require('./img/sample.jpg')} style = {{ width : 230, height : 300}}/>
加载网络图片
我们的APP不可能是一个纯离线产品,那网络图片就是必不可少,RN加载图片就比远程环境方便,给出正确的UR,就和网页加载图片一样
<Image source = {{uri : '图片地址'}} style = {{ width : 230 , height : 220}}/>
还是和家在本地图片一样,官方希望大家给定控件的尺寸。
因为你的图片尺寸不可控,当加载出来后把用户第一次看到的布局给整变形了,这是一个很不好的用户体验。
Note:这里补充下 我们的uri
属性 是 object 类型的。
加载Android项目的图片资源
那既然可以加载RN项目里的图片,必然也可以加载android项目下的图片,加载方式大同小异
<Image style = {{ width : 230, height : 230}} source={require('image!timg')} />
唯一区别就是 在值里加一个 imge!文件名,不需要后缀哦!
图片作为背景
其实图片也可以作为一个父容器,也就是类似于背景的效果,使用非常简单,在<Image></Image>
中间加就行,像这样
<Image style = {{ width : 230, height : 230}} source={require('image!timg')} >
<Text>在里面</Text>
</Image>
源码地址:https://github.com/ddwhan0123/ReactNativeDemo/blob/master/ImageDemo.js
这礼拜7天,大家HOLD住
混合开发的大趋势之一React Native之Image (脑动理解)的更多相关文章
- 混合开发的大趋势之一React Native与Android联调
转载请注明出处:王亟亟的大牛之路 先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android 公司某 ...
- 混合开发的大趋势之一React Native之页面跳转
转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native之简单的登录界面
转载请注明出处:王亟亟的大牛之路 这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从"实战"中讲解吧 还是继续安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native手势行为那些事
转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let
转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes
转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...
- 移动开发发展方向-----Hybird混合开发3大方案
移动开发发展方向-----Hybird混合开发3大方案
- 浅谈移动应用的跨平台开发工具(Xamarin和React Native)
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与 ...
随机推荐
- Oracle菜鸟之怎样创建和删除表空间
1.创建暂时表空间 创建表空间时,dbf文件一般存放在datafile文件的存放文件夹下(通常是在实例名命名的文件夹以下) 能够通过 select * from v$datafile;查看全部数据文件 ...
- BF算法 + KMP算法
准备: 字符串比大小:比的就是字符串里每个字符的ASCII码的大小.(其实这样的比较没有多大的意义,我们关心的是字符串是否相等,即匹配等) 字符串的存储结构:同线性表(顺序存储+链式存储) 顺序存储结 ...
- [Go语言]从Docker源码学习Go——function和method
function和method关系 method是针对某一类型定义的function, function可以单独调用,method必须针对某一类型的实例进行调用 //function 调用方式 pac ...
- docker 从容器中拷文件到宿主机器中
sudo docker cp 1d051604e0ea:/root/data /home/developer/zhanghui/data
- C# .net 数组倒序排序
1.数组方法 Array.Sort(Array Array); 此方法为数组的排序(正序)方法 Array.Reverse(Array Array); 此方法可以将数组中的值颠倒 两个方法结合使用 ...
- CodeForeces 665C Simple Strings
C. Simple Strings time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- delphi xe学习随意记录
学习来源(根据他们的资料整理) 论坛:http://www.coder163.com(有视频) 博客:http://del.cnblogs.com/(万一的博客) 1.1.1 命名规范的概述 1 ...
- Storm-源码分析-Topology Submit-Executor
在worker中通过executor/mk-executor worker e, 创建每个executor (defn mk-executor [worker executor-id] (let [e ...
- pytho创建二维码简单版
pytho创建二维码简单版 import qrcode aa = qrcode.make("https://github.com/phygerr/") aa.save('C:\Us ...
- Consistent hashing
Download source code - 20.3 KB What is libconhash libconhash is a consistent hashing library which c ...