React Native从入门到深入三--常用组件Image的详

一、简单介绍

React组件中和iOS的UIimage功能相同的组件是Image,用于显示多种不同类型的图片，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。下面详解介绍一下image的使用。

二、Image组件的基本属性

2.1样式属性:

backgroundColor    string   背景色

borderColor      string    边框颜色

borderWidth    number  边框宽度

borderRadius   number   边框圆角

overflow     e num('visible', 'hidden')   设置图片尺寸超过容器可以设置隐藏或者显示

tintColor     string   颜色设置

opacity     number  透明度设置

resizeMode    enum('cover', 'contain', 'stretch')

决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）

contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。

stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

2.2动画属性：

Flexbox...  支持弹性盒子风格

Transforms...  动画属性支持 ：{rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]

2.3属性方法：类似于iOS一个页面的声明周期

onLayout （function） 当image布局改变的时候调用，调用方法为：{nativeEvent: {layout: {x, y, width, height}}}.

onLoad  (function)  加载成功完成时调用此回调函数。

onLoadEnd (function)  加载结束后，不论成功还是失败，调用此回调函数。

onLoadStart  (function)  加载开始时调用。

onError  （function ）  当加载错误的时候调用此回调函数，参数为{nativeEvent: {error}}

onProgressfunction     在加载过程中不断调用，参数为{nativeEvent: {loaded, total}}

2.4交互属性：

accessible   bool 是否开启用户交互

accessibilityLabel   string    当用户与图片交互时，读屏器会朗读的文字。

blurRadius   number   为图片添加一个指定半径的模糊滤镜。

capInsets{top: number, left: number, bottom: number, right: number} 

当图片被缩放的时候，capInsets指定的角上的尺寸会被固定而不进行缩放，而中间和边上其他的部分则会被拉伸。这在制作一些可变大小的圆角按钮、阴影、以及其它资源的时候非常有用。

三、Image加载加载图片的方法

3.1加载静态本地图片

要往App中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后引用就好。

图片文件的查找会和JS模块的查找方式一样。Packager就会去这个组件所在的文件夹下查找icon.jpeg。并且，如果你有icon.iOS.jpeg和icon.android.jpeng，Packager就会根据平台而选择不同的文件。

你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。

Packager会打包所有的图片并且依据屏幕精度提供对应的资源如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。

3.2加载混合APP中的图片资源

使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）。

注意：

此方法没有安全检查。需要自己确保图片在应用中确实存在，而且还需要指定尺寸

3

3.3加载网络图片

注意事项：你需要手动指定图片的尺寸

运行结果：

3.4背景图片的实现

通过嵌套来实现背景图片

运行结果：