一个用于显示图片的React组件,类似于iOS中UIImage控件,该组件可以通过多种方式加载图片资源,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片。
一、Image组件加载图片的方式
(1)从当前JS项目中加载图片
该图片资源文件的查找和JS模块相似,该会根据填写的图片路径相对于当前的js文件路径进行搜索。此外,React Naive的Packager会根据平台选择相应的文件,例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios),会分别根据android或者ios平台选择相应的文件。
(2)加载原生项目中的图片
使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹),会自动根据机子的型号去加载对应的图片资源。
(3)加载来自网络的图片
(4)设置图片为背景
背景图片
二、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 - 如果你知道图片的尺寸,那么可以在这里指定。这一尺寸会被用作
组件的默认尺寸。
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 ?
{this.state.progress}%
: null;
return this.state.error ?
{this.state.error} :
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}
;
}
});