混合开发的大趋势之一React Native之Image (脑动理解)
来源:互联网 发布:淘宝网商城食品香外香 编辑:程序博客网 时间:2024/06/07 04:47
文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路
国庆这些天要么旅游要么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 Props (属性)
- 混合开发的大趋势之一React Native之简单的登录界面
- 混合开发的大趋势之一React Native之页面跳转
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
- 混合开发的大趋势之一React Native(环境搭建)
- 混合开发的大趋势之一React Native(Hello Horld+简单ViewGroup)
- 混合开发的大趋势之一React Native(对齐方式)
- 混合开发的大趋势之一React Native State (状态),Style(样式)
- 混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位置关系)
- 混合开发的大趋势之一React Native TextInput (文本输入)
- 混合开发的大趋势之一React Native ScrollView (拉伸视图),ListView(列表视图)
- 混合开发的大趋势之一React Native ScrollView (拉伸视图), ListView(列表视图)
- 混合开发的大趋势之一React Native与Android联调
- 混合开发的大趋势之一React Native手势行为那些事
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes
- [React Native混合开发]React Native for iOS之应用
- C++实现图中的普里姆最短路径算法(P算法)
- WPF编译时出现【错误1程序“C:\...\Debug\MVC_DHCC.exe”不包含适合于入口点的静态“Main”方法】的错误
- JS实现列表的增加和删除功能
- HTML5快速上手之3:与文本格式有关的基本指令
- ios developer tiny share-20160927
- 混合开发的大趋势之一React Native之Image (脑动理解)
- js中的~和取整
- C++ 中不能依赖合成默认构造函数
- JQuery中$.ajax()方法参数详解
- SharePreferences存储数据
- 第五周 项目9 斐波那契数列
- iOS开发技巧:设置状态栏字体颜色
- C# Operators
- 06Node.js Buffer(缓冲区)