1.載入網路圖片

  render() {
    return (
      <View style={styles.container}
      >
       <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />
       <Image source={require('./img/icon.png')} 
       style={{alignSelf:'center'}}
       /> 
      </View>
    );
  }
 

2.載入本地資源圖片

  render() {
    return (
      <View style={styles.container}
      >
       <Image source={require('./img/icon.png')} 
       style={{alignSelf:'center'}}
       /> 
      </View>
    );
  }

二：Image 元件的樣式

當Image的實際寬、高與圖片的實際寬、高不符時，檢視片樣式定義中resizeMode的取值不同分為三種情況：contain  cover  strech,預設值是cover

cover模式：圖片處理的思路是要求填充整個Image定義的顯示區域，可以對圖片進行放大或者縮小，可以丟棄放大或者縮小後的圖片中的部分割槽域，只求在顯示比例不失真的情況下填充整個顯示區域。

contain模式：可以對它進行等比縮小，但不能丟棄縮小後圖片的某部分。

strech模式：要求填充整個Image定義顯示區域，為此按照需要對圖片進行任意的縮放，不考慮 保持圖片的寬、高比，這種模式顯示的圖片可能會出現明顯的失真

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class ViewProject extends Component {

  render() {
    return (
      <View style={styles.container}
      >
       <Image 
        source={require('./img/tuxiang.png')} 
        style={[styles.imageStyle,{resizeMode:'cover'}]}
       /> 
       <Image 
        source={require('./img/tuxiang.png')} 
        style={[styles.imageStyle,{resizeMode:'contain'}]}
       /> 
       <Image 
        source={require('./img/tuxiang.png')} 
        style={[styles.imageStyle,{resizeMode:'stretch'}]}
       /> 
      </View>
    );
  }

}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth:1,
    backgroundColor:'grey',
  },
  imageStyle:{
    margin:2,
    alignSelf:'center',
    width:200,
    height:200,
    backgroundColor:'white',
  }
 
});
AppRegistry.registerComponent('ViewProject', () => ViewProject);