從零學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定義的顯示地區,這種模式顯示的圖片可能會畸形和失真。

來看下例子，修改上面的代碼,定義三個相同大小的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‘    }});

看看運行效果:

其它樣式

雖然Image組件不是從View組件繼承而來的,但是它支援了絕大多數View中的樣式鍵,除了這些還有額外的一些.
1. tintColor是IOS平台專有屬性,顏色類型,可以讓圖片中的非透明像素部分有一種被染色的效果.
2. overlayColor是Android平台的專有屬性,顏色類型. Android平台在某些特殊情況無法通過borderRadius實現圓角效果,這時需要使用overlayColor屬性,強行將需要圓角的部分使用指定的顏色填充, 從而實現圓角效果.

回呼函數

Image也支援onLayout回呼函數,與View組件的onLayout函數類似
當我們通過Image組件載入網狀圖片時, 可以設定onLoadStart,onLoadEnd,onLoad三個屬性來指定在開始讀取與讀取結束時所需要進行的函數處理. onLoad只有成功讀取圖片調用, 而onLoadEnd無論成功與失敗,都會調用。

更多精彩請關注公眾帳號likeDev,公眾帳號名稱：愛上Android。

從零學React Native之08Image組件