/**
* @Author: fantasy
* @Date:   2016-06-13T17:27:21+08:00
* @Last modified by:   fantasy
* @Last modified time: 2016-07-11T10:45:42+08:00
*/


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


let imgArrowSource = require('../Common/AllImages/[email protected]');
const imageUrl1 ='http://media8.smartstudy.com/media/pic/advertisement/26fd32fa1e6711e6be3200163e0053c21463733906804284.jpg';
const imageUrl2 ='http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=';
const imageErrorUrl2 ='facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=11111';
let {width:ScreenW, height:ScreenH} = Dimensions.get('window');


let prefetchTask = Image.prefetch(imageUrl2);
let capHeight = 0;


export default class TestImageView extends React.Component{


  constructor(props){
    super(props);
    this.state={isAlreadyLoad:false};


  }
  _onLoadStart(param: string){
    console.log(param);
  }
  _onLoad(param){
    console.log(param);
  }
  _onLoadEnd(param){
    console.log(param);
    if (!this.state.isAlreadyLoad) {
      this.state.isAlreadyLoad = true;
      console.log(this.state.isAlreadyLoad);
      Image.getSize(imageUrl2,(width,height) =>{
        this.setState({width,height});
      });
    }


  }
  _onLayout(param){
    console.log(param);
  }
  _onProgress(loaded,total){
    console.log(loaded);
    console.log(total);
  }
  _onError(param){
    console.log('獲取圖片失敗',param);
  }


  render(){
    return(
      <View style={{backgroundColor:'yellow',flex:1,justifyContent:'center'}}>
         <Image
            source = {{uri:imageUrl1}}
            defaultSource={imgArrowSource}
            capInsets = {{top:capHeight,left:capHeight,bottom:capHeight,right:capHeight}}
            resizeMode = 'stretch'
            style  = {{alignSelf:'center',width:this.state.isAlreadyLoad?ScreenW:300,height:this.state.isAlreadyLoad?this.state.height*ScreenW/this.state.width:300,backgroundColor:'red'}}
            onLoadStart = {()=>this._onLoadStart('載入開始時呼叫。')}
            onLoad = {()=>this._onLoad('載入成功完成時呼叫此回撥函式。')}
            onLoadEnd = {()=>this._onLoadEnd('載入結束後，不論成功還是失敗，呼叫此回撥函式')}
            onLayout ={(e)=>this._onLayout(e.nativeEvent.layout)}
            onError ={(e)=>this._onError(e.nativeEvent.error)}
            onProgress={(e)=>this._onProgress(e.nativeEvent.loaded,e.nativeEvent.total)}
         />
      </View>
    );
  }


}
/*


屬性：
onLayout  當元素掛載或者佈局改變的時候呼叫，引數為：{nativeEvent: {layout: {x, y, width, height}}}.
onLoad    載入成功完成時呼叫此回撥函式。
onLoadEnd 載入結束後，不論成功還是失敗，呼叫此回撥函式。
onLoadStart 載入開始時呼叫。
onError   當載入錯誤的時候呼叫此回撥函式，引數為{nativeEvent: {error}}
onProgress  在載入過程中不斷呼叫，引數為{nativeEvent: {loaded, total}}，可以得到下載的進度
defaultSource  佔位圖片，當沒有下載完成的時候 顯示的圖片
source {uri: string},  這個是圖片的url，
capInsets   {top: number, left: number, bottom: number, right: number}  在圖片被拉伸的情況下，capInsets指定的角上的尺寸會被固定而不進行縮放，而中間和邊上其他的部分則會被拉伸，試試 把這個值變成上下左右都是100，會有意外之喜
blurRadius number 為圖片新增一個指定半徑的模糊濾鏡。 這個值越大，圖片越模糊，
accessible  bool 官方說：當此屬性為真的時候，表示這個圖片是一個啟用了無障礙功能的元素。不懂
accessibilityLabel string 官方說：當用戶與圖片互動時，讀屏器（無障礙功能）會朗讀的文字。  待補充
resizeMode enum('cover', 'contain', 'stretch')
      cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器檢視的尺寸（如果容器有padding內襯的話，則相應減去）。譯註：這樣圖片完全覆蓋甚至超出容器，容器中不留任何空白。
      contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器檢視的尺寸（如果容器有padding內襯的話，則相應減去）。譯註：這樣圖片完全被包裹在容器中，容器中可能留有空白
      stretch: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿容器。
方法：
prefetch(url: string)   預載入一個遠端圖片(將其下載到本地磁碟快取)。
Image.getSize(imageUrl2,(width,height) =>{});   在顯示圖片前獲取圖片的寬高(以畫素為單位)。如果圖片地址不正確或下載失敗,此方法也會失敗。
 */