Image元件的常見屬性：

• 屬性方法

  • onLoad(function）:當圖片載入成功後，回撥該方法
  • onLoadStart（function）:當圖片開始載入的時候呼叫該方法
  • onLoadEnd(function）:當圖片載入結束回撥該方法，不會管圖片載入成功還是失敗
  • onLayout（function）:當 Image 佈局發生變化會呼叫該方法
  • resizeMode:縮放比例，（包含可選引數’cover’, ‘contain’, ‘stretch’）,當該圖片的尺寸超過佈局的尺寸時，會根據設定 Mode 進行縮放或剪裁圖片
  • source{uri:string}:進行標記圖片引用，該引數可以為一個網路 url地址 或者 一個本地路徑

• 樣式屬性

  • FlexBox：支援彈性盒子風格
  • Transforms：支援屬性動畫
  • backgroundcolor：背景顏色
  • borderColor：邊框顏色
  • borderWidth：邊框寬度
  • borderRadius：邊框圓角
  • overflow：設定圖片尺寸超過容器可以設定顯示或隱藏(‘visible’, ‘hidden’)
  • tintColor：顏色設定
  • opacity：設定透明度（取值範圍0.0（全透明）~ 1.0（不透明））

1、沒有設定width和height的情況下，預設為圖片的寬高

/* 不設定尺寸的情況下 */
<Image source={require('./imgs/icon.png'
 
)} /> 

效果圖：

2、設定width和height的情況下，尺寸圖片的寬高

/* 設定尺寸的情況下 */
<View style={styles.container}>
         <Image source={require('./imgs/icon.png')} />  
         <Image source={require('./imgs/icon.png')} style={styles.imgStyle} />
      </View>

const styles = StyleSheet.create({
  imgStyle:{
     width:30
 
,
     height:20,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  });

效果圖：

3、載入網路圖片

{/* uri是固定寫法，後面跟上圖片網路URL地址的字串即可，還有，網路圖片必須設定圖片的大小，否則無法顯示，一般還需要配合填充方式以達到想要的效果 */}
         <Image source={{uri:'http://avatar.csdn.net/5/F/0/1_zww1984774346.jpg'}} style={styles.imgStyle2}/>

效果圖：

4、動態設定圖片的寬與螢幕等寬

// 匯入Dimensions庫
var Dimensions = require('Dimensions');

export default class firstProgram extends Component {
  render() {
    // var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
         <Image source={require('./imgs/icon.png')} />  
         <Image source={require('./imgs/icon.png')} style={styles.imgStyle} />
         {/* uri是固定寫法，後面跟上圖片網路URL地址的字串即可，還有，網路圖片必須設定圖片的大小，否則無法顯示，一般還需要配合填充方式以達到想要的效果 */}
         <Image source={{uri:'http://avatar.csdn.net/5/F/0/1_zww1984774346.jpg'}} style={styles.imgStyle2}></Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  imgStyle:{
     width:30,
     height:20,
  },
  imgStyle2:{
     // 設定背景顏色
     backgroundColor:'green',
     // 設定寬度
     width:Dimensions.get('window').width,
     // 設定高度
     height:150
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

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

效果圖：

圖片填充模式：

• cover( 預設)：圖片居中顯示且不拉伸圖片，超出的部分剪裁掉

imgStyle2:{
     // 設定背景顏色
     backgroundColor:'green',
     // 設定寬度
     width:Dimensions.get('window').width,
     // 設定高度
     height:150
     resizeMode:'cover'
  }

• contain：容器完全容納圖片，圖片等比例進行拉伸

imgStyle2:{
     // 設定背景顏色
     backgroundColor:'green',
     // 設定寬度
     width:Dimensions.get('window').width,
     // 設定高度
     height:150
     resizeMode:'contain'
  }

效果圖：

• stretch：圖片被拉伸至與容器大小一致，可能會發生變形

```
imgStyle2:{
     // 設定背景顏色
     backgroundColor:'green',
     // 設定寬度
     width:Dimensions.get('window').width,
     // 設定高度
     height:150
     resizeMode:'stretch'
  }

效果：

demo1：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Image,
  Text,
  View,
  TabBarIOS,
  NavigatorIOS,
  ScrollView,
  TouchableHighlight 
} from 'react-native';

// 匯入Dimensions庫
var Dimensions = require('Dimensions');

export default class firstProgram extends Component {
  render() {
    // var movie = MOCKED_MOVIES_DATA[0];
    return (

    <View style={styles.container}>
                {/* 因為還沒講到listView,這邊就用View代表Cell*/}
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
                    {/* 暱稱 */}
                    <Text style={styles.nameStyle}>暱稱</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
                    {/* 出生日期 */}
                    <Text style={styles.nameStyle}>出生日期</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 頭像 */}
                    <Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
                    {/* 籍貫 */}
                    <Text style={styles.nameStyle}>籍貫</Text>
                </View>
                {/* 分隔線 */}
                <View style={styles.lineStyle}></View>
            </View>

    );
  }
}


    const styles = StyleSheet.create({
        container: {
            marginTop:20,
            backgroundColor:'white',
            flex:1,
            // 設定換行方式
            flexWrap:'wrap'
        },

        cellStyle: {
            // 尺寸
            height:44,
            width:Dimensions.get('window').width,
            // 設定背景顏色
            backgroundColor:'white',
            // 設定主軸方向
            flexDirection:'row',
            // 設定側軸對齊方式
            alignItems:'center'
        },

        imgStyle: {
            width:30,
            height:30,
            // 設定圖片填充模式
            resizeMode:'cover',
            // 設定圓角
            borderRadius:15,
            // 設定圖片位置
            marginLeft:10
        },

        nameStyle: {
            // 設定暱稱位置
            marginLeft:10
        },

        lineStyle: {
            // 背景色
            backgroundColor:'black',
            // 設定尺寸
            width:Dimensions.get('window').width,
            height:1
        }

    });

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

效果圖：