一个用于显示图片的React组件，类似于iOS中UIImage控件，该组件可以通过多种方式加载图片资源，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片。
一、Image组件加载图片的方式
（1）从当前JS项目中加载图片
<Image source={require('./图片路径')}/>
该图片资源文件的查找和JS模块相似，该会根据填写的图片路径相对于当前的js文件路径进行搜索。此外，React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。
（2）加载原生项目中的图片
<Image source={{uri: '图片名字'}} />
使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)，会自动根据机子的型号去加载对应的图片资源。
（3）加载来自网络的图片
<Image source={{uri:'图片的URL'}}/>
（4）设置图片为背景
<Image source={{uri:'图片的URL'}} >
<Text>
背景图片
</Text>
</Image>
二、Image的属性
（1）resizeMode
enum('cover', 'contain', 'stretch', 'repeat', 'center')
决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。
cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白
stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
center: 居中不拉伸。
（2）defaultSource（ios）
{uri: string, width: number, height: number, scale: number}, number
在读取图片时默认显示的加载提示图片
uri - 是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。
width, height - 如果你知道图片的尺寸，那么可以在这里指定。这一尺寸会被用作<Image/>组件的默认尺寸。
scale - 图片的缩放系数。默认是1.0，意味着每一个图片像素都对应一个设备独立像素（DIP）。
number - 本地图片引用语法require('./image.jpg')所返回的内部资源id。
（3）blurRadius
number blurRadius(模糊半径)：为图片添加一个指定半径的模糊滤镜。
三、Image的方法
onLayout(function)
当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.
onLoad (function)
当图片加载成功之后，回调该方法
onLoadEnd (function)
当图片加载失败回调该方法，该不会管图片加载成功还是失败
onLoadStart (function)
当图片开始加载的时候调用该方法
onError (function)ios
当加载错误的时候调用此回调函数，参数为{nativeEvent: {error}}
onPartialLoad (function)ios
如果图片本身支持逐步加载，则逐步加载的过程中会调用此方法。“逐步加载”的具体定义与具体的标准和实现有关。
onProgress (function)ios
在加载过程中不断调用，参数为{nativeEvent: {loaded, total}}
Demo
var NetworkImageExample = React.createClass({
getInitialState: function() {
return {
error: false,
loading: false,
progress: 0
};
},
render: function() {
var loader = this.state.loading ?
<View style={styles.progress}>
<Text>{this.state.progress}%</Text>
<ActivityIndicator style={{marginLeft:5}} />
</View> : null;
return this.state.error ?
<Text>{this.state.error}</Text> :
<Image
source={this.props.source}
style={[styles.base, {overflow: 'visible'}]}
onLoadStart={(e) => this.setState({loading: true})}
onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}
onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}
onLoad={() => this.setState({loading: false, error: false})}>
{loader}
</Image>;
}
});
<NetworkImageExample source={{uri: 'https://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
网友评论