React Native 学习之Image组件

/**
* @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/01@2x.jpg');
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) =>{});   在显示图片前获取图片的宽高(以像素为单位)。如果图片地址不正确或下载失败,此方法也会失败。
 */