React Native之Image组件
同 HTML 的 img 元素一样,React Native 提供的 Image 组件可以用来显示各种途径的图片,比如网络图片、本地图片、照相机图片等。
虽然效果是一样的。然而用法还是有区别的。
1、src
属性改为了source
属性。
在web中,如果加载图片会使用img标签,其中src属性用来指定图片的地址。而在React Native中,使用Image组件来加载图片,src属性也变为了source属性,而且不接受字符串,值是一个带有uri属性的对象。
2、必须声明图片的宽、高(限网络图片)。
在web中,加载图片可以不必规定图片的宽、高,如果不设置那么会以图片的原始尺寸来显示;如果设置,可以只设置一个值,这时,图片会等比例缩放;如果设置两个值的话,则会根据规定尺寸来显示图片。而在React Native中,如果是加载网络图片时,必须声明图片的宽和高,否则图片不会显示。
3、宽高为逻辑像素点(不带单位)。
React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。只能使用数值,不带任何单位。
4、加载图片的方式与原来不同。
在使用Image组件加载图片时,可分为网络图片和本地图片,如果是加载本地图片,使用require('string') 来包裹,string表示图片本地路径。
如果是加载网络图片,则使用uri:'string' ,string表示网络图片的地址。
例如,要加载一幅网络图片,可以这样写:
<Image source={{uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=991823527,956610122&fm=27&gp=0.jpg'}} style={{width:200,height:180}}/>
当然也可以这样写:
// render后:
let pic = {
uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=991823527,956610122&fm=27&gp=0.jpg'
}; // return后
<Image source={pic} style={{width:200,height:180}}/>
加载本地图片:
<Image source={require('./images/105.jpg')} style={{width:200,height:180}} />
如果不限制尺寸,则显示图片的原始尺寸,此处与加载网络图片有所不同,可以不必规定图片尺寸,如果是加载网络图片,必须规定图片的宽高,否则图片不显示。
5、Image标签必须闭合,否则会报错
React Native之Image组件的更多相关文章
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...
- React Native知识6-NavigatorIOS组件
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...
- React Native知识2-Text组件
Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...
- react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...
- React Native 系列(五) -- 组件间传值
前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...
- react native 封装TextInput组件
上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址 react native定报预披项目知识点总结 TextInput介绍 官 ...
- React Native之常用组件(View)
一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...
- React Native常用第三方组件汇总--史上最全 之一
React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...
随机推荐
- 3.sass的数据类型与函数
数据类型 在sass里有数字.字符串.列表.颜色等类型 在cmd里 输入 sass -i 就会进入到交互模式,输入的计算可以马上得到结果 type-of()可以用来得到数据类型,如: type-of( ...
- sudo 做不到的事
本文是经验帖,以后遇到类似的情况会持续更新到这篇文章 普通用户使用sudo会遇到以下情况 1.字符流无法写入到 /var/log/messages /var/log/secure (实际上这些文件一旦 ...
- UNIX域协议(命名套接字)
这里主要介绍命名UNIX域套接字 1.什么是UNIX域套接字Unix域协议并不是一个实际的协议族,而是在单个主机上执行客户/服务通信的一种方式.是进程间通信(IPC)的一种方式.它提供了两类套接字:字 ...
- 手撕vue-cli配置文件——config篇
最近一直在研究webpack,突然想看看vue-cli中的webpack是如何配置,查阅了很多相关的文章,所以也想出几篇关于vue-cli配置的东西.正所谓"工欲善其事必先利其器" ...
- Ajax 的用法
1.什么是 Ajax? Ajax,英文名 Asynchronous JavaScript and XML,也就是异步的 JavaScript 和 XML.它不是一门新的语言,而是一种使用现有标准的新方 ...
- php实现MySQL读写分离
MySQL读写分离有好几种方式 MySQL中间件 MySQL驱动层 代码控制 关于 中间件 和 驱动层的方式这里不做深究 暂且简单介绍下 如何通过PHP代码来控制MySQL读写分离 我们都知道 &q ...
- CSS3媒体查询(Media Queries)介绍
媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备) ...
- git强制push
Git 如何强制push? $ git push -u origin master –f 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...
- jQuery 选择器 (一)
选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $( ...
- [Spark SQL] SparkSession、DataFrame 和 DataSet 练习
本課主題 DataSet 实战 DataSet 实战 SparkSession 是 SparkSQL 的入口,然后可以基于 sparkSession 来获取或者是读取源数据来生存 DataFrameR ...