从零学React Native之08Image组件

开发过程中, 几乎每个项目都会用到图片.
RN就是通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源图片。
Image组件必须在样式中声明图片的款和高。如果没有声明，则图片将不会被呈现在界面上。

var imageAddress = http://qq.111cn.net/uploads/allimg/140712/22020H9C-22.jpg; class AwesomeProject extends Component { render() { return ( //根View View center, alignItems: center, backgroundColor: #F5FCFF imageStyle: { width:100, height:100 AppRegistry.registerComponent(AwesomeProject, () = AwesomeProject);

运行结果:

在RN开发中,需要预先加载静态的图片资源,如下，其中需要在项目目录下创建image文件夹, 里面放置big_star.png。

var imageAddress = ./image/big_star.png; //运行阶段赋值 

class AwesomeProject extends Component {

 //require 在编辑阶段就会处理 

 render() {

 return (

 //根View

 View >

在RN开发中, 不允许使用字符串变量来指定需要预先加载的图片的名称.因为React Native在编译代码时处理所有的require声明,还不是在运行时动态的处理,而，var在运行时赋值,所以不能动态加载图片资源. 就会报下面的错误:




上面我们说了,Image组件必须在样式中声明图片的款和高。如果没有声明，则图片将不会被呈现在界面上。 


我们一般将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高.当Image的实际宽、高与图片的实际宽、高不符时,视图片样式定义中resizeMode的取值不同而分为三种情况, 三个取值分别是: contain, cover和stretch.默认值是cover.


cover模式只求在显示比例不失真的情况下填充整个显示区域。可以对图片进行放大或者缩小，超出显示区域的部分不显示， 也就是说，图片可能部分会显示不了。

contain模式是要求显示整张图片, 可以对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 如果图片宽高都小于控件宽高，则不会对图片进行放大。

stretch模式不考虑保持图片原来的宽,高比.填充整个Image定义的显示区域,这种模式显示的图片可能会畸形和失真。

center模式, 9月11号的0.33版本才支持，contain模式基础上支持等比放大。

来看下例子，修改上面的代码,定义三个相同大小的Image控件 引入同一张图片，指定不同的resizeMode。

class AwesomeProject extends Component {

 componentWillMount() {

 //预加载静态资源

 this.image=require(./image/meinv.jpg);

 render() {

 return (

 //根View

 View cover}]}

 source={this.image}/ 

 Image contain}]}

 source={this.image}/ 

 Image stretch}]}

 source={this.image}/ 

 /View 

const styles = StyleSheet.create({

 container: { //根View样式

 flex: 1,

 justifyContent: center,

 alignItems: center,

 backgroundColor: grey

 imageStyle: {

 width:150,

 height:150,

 margin:5,

 backgroundColor:white

});

看看运行效果:



resizeMode还可以定义在属性上，比style中的优先级要高:


看到上面三个模式,可以发现原生的Image控件无法实现等比放大后无丢失显示，我们需要自定义区实现，大家可以参考我的另一篇文章React Native等比放大不丢失图片


虽然Image组件不是从View组件继承而来的,但是它支持了绝大多数View中的样式键,除了这些还有额外的一些. 


1. tintColor是IOS平台专有属性,颜色类型,可以让图片中的非透明像素部分有一种被染色的效果. 


2. overlayColor是Android平台的专有属性,颜色类型. Android平台在某些特殊情况无法通过borderRadius实现圆角效果,这时需要使用overlayColor属性,强行将需要圆角的部分使用指定的颜色填充, 从而实现圆角效果.


Image也支持onLayout回调函数,与View组件的onLayout函数类似 


当我们通过Image组件加载网络图片时, 可以设置onLoadStart,onLoadEnd,onLoad三个属性来指定在开始读取与读取结束时所需要进行的函数处理. onLoad只有成功读取图片调用, 而onLoadEnd无论成功与失败,都会调用。

更多精彩请关注微信公众账号likeDev,公众账号名称：爱上Android。 



 于连林520wcf

 【爱上Android】作者，从事Android开发和教育多年，担当多个重点项目的负责人，项目涉及办公类、O2O、医疗等多元化类型，曾在培训机构从事Android教育多年，有上千课时讲课经验。