從零學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。