React Native 之组件Image

一个用于显示图片的React组件,类似于iOS中UIImage控件,该组件可以通过多种方式加载图片资源,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片。

一、Image组件加载图片的方式

(1)从当前JS项目中加载图片


该图片资源文件的查找和JS模块相似,该会根据填写的图片路径相对于当前的js文件路径进行搜索。此外,React Naive的Packager会根据平台选择相应的文件,例如:my_icon.ios.pngmy_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}
    ;
}
});

你可能感兴趣的:(React Native 之组件Image)