从零学React Native之08Image组件

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

网络图片加载

加载网络图片很是简单， 直接上代码：
修改index.ios.js或者inde.android.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Image
} from 'react-native';

var imageAddress = 'http://qq.111cn.net/uploads/allimg/140712/22020H9C-22.jpg';
class AwesomeProject extends Component {
    render() {
        return (
            //根View
            <View style={styles.container}>
                <Image style={styles.imageStyle}
                       source={{uri:imageAddress}}/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {   //根View样式
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    imageStyle: {
        width:100,
        height:100
    }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

运行结果:

本地图片加载

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

class AwesomeProject extends Component {
    render() {
        return (
            //根View
            <View style={styles.container}>
                <Image style={styles.imageStyle}
                       source={require('./image/big_star.png')}/>
            </View>
        );
    }
}

require等同于使用了var声明了一个变量,等同于在代码顶部预先加载了图片资源.

注意，下面代码运行的时候就会报错

var imageAddress = './image/big_star.png'; //运行阶段赋值 
class AwesomeProject extends Component {
    //require 在编辑阶段就会处理 
    render() {
        return (
            //根View
            <View style={styles.container}>
                <Image style={styles.imageStyle}
                       source={require({imageAddress})}/>
            </View>
        );
    }
}

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

resizeMode

上面咱们说了,Image组件必须在样式中声明图片的款和高。若是没有声明，则图片将不会被呈如今界面上。
咱们通常将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高.当Image的实际宽、高与图片的实际宽、高不符时,视图片样式定义中resizeMode的取值不一样而分为三种状况, 三个取值分别是: contain, cover和stretch.默认值是cover.

1. cover模式只求在显示比例不失真的状况下填充整个显示区域。能够对图片进行放大或者缩小，超出显示区域的部分不显示， 也就是说，图片可能部分会显示不了。
2. contain模式是要求显示整张图片, 能够对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 若是图片宽高都小于控件宽高，则不会对图片进行放大。
3. stretch模式不考虑保持图片原来的宽,高比.填充整个Image定义的显示区域,这种模式显示的图片可能会畸形和失真。
4. center模式, 9月11号的0.33版本才支持，contain模式基础上支持等比放大。

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

class AwesomeProject extends Component {
    componentWillMount() {
        //预加载静态资源
        this.image=require('./image/meinv.jpg');
    }
    render() {
        return (
            //根View
            <View style={styles.container}>
                <Image style={[styles.imageStyle,{resizeMode:'cover'}]}
                       source={this.image}/>
                <Image style={[styles.imageStyle,{resizeMode:'contain'}]}
                       source={this.image}/>
                <Image style={[styles.imageStyle,{resizeMode:'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  style={{height:200,width:200}} resizeMode={Image.resizeMode.cover} source={this.image}/>

看到上面三个模式,能够发现原生的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。