ReactNative基礎組件學習（二） Image組件

 Image重要組件

 用於顯示多種不同類型圖片的 React 組件，包括網絡圖片、靜態資源、臨時的本地圖片、以及本地磁盤上的圖片（如相冊）等。

// export default App;
import React from 'react';
import {AppRegistry,View,Image,ScrollView} from 'react-native'
//http://file.66uu.com.cn/201312/26/1_13880282505Jbm.jpg
//http://benyouhuifile.it168.com/forum/201310/23/162906bl2ttfnm775b1sq8.jpg
export default class App extends React.Component {
  render() {
    return (
      <ScrollView>
        <Image
        style={{width: 200,height: 200,resizeMode:'center'}}
        source={require('./1.jpg')}
        />
        <Image 
        style={{width:200,height:200,resizeMode:'contain'}}
        source={{uri:'http://benyouhuifile.it168.com/forum/201310/23/162906bl2ttfnm775b1sq8.jpg'}}
        />
        <Image
        style={{width:200,height:200,resizeMode:'cover'}}
        source={require('./2.jpg')}
        />
        <Image
        style={{width:200,height:200,resizeMode:'repeat'}}
        source={require('./3.jpeg')}
        />
        <Image
        style={{width:200,height:200,resizeMode:'stretch'}}
        source={{uri:'http://file.66uu.com.cn/201312/26/1_13880282505Jbm.jpg'}}
        />
      </ScrollView>
    );
  }
}

• borderTopRightRadius: number

• backfaceVisibility: enum('visible', 'hidden')

• borderBottomLeftRadius: number

• borderBottomRightRadius: number

• borderColor: color

• borderRadius: number

• borderTopLeftRadius: number

• backgroundColor: color

• borderWidth: number

• opacity: number

• overflow: enum('visible', 'hidden')

• resizeMode: Object.keys(ImageResizeMode)

• tintColor: color

• resizeMode

• 決定當組件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。默認值爲cover。cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器視圖的尺寸（如果容器有 padding 內襯的話，則相應減去）。譯註：這樣圖片完全覆蓋甚至超出容器，容器中不留任何空白。

• contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器視圖的尺寸（如果容器有 padding 內襯的話，則相應減去）。譯註：這樣圖片完全被包裹在容器中，容器中可能留有空白。

• stretch: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿容器。

• repeat: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸，但是當尺寸超過容器時會在保持寬高比的前提下縮放到能被容器包裹。

• center: 居中不拉伸。

• source

• 圖片源數據（遠程 URL 地址或本地數據）。

• require 加載本地圖片

• require('本地圖片路徑')

• uri 加載遠程圖片

• uri:'http://benyouhuifile.it168.com/forum/201310/23/162906bl2ttfnm775b1sq8.jpg'