React native Image组件

react native

(创建react native项目)[环境|创建]

创建项目

$ npm install -g react-native-cli$ react-native init project

译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：

npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global

常用组件

Image

renderImages() {  return (    <View>      <Image        style={styles.icon}        source={require('./icon.png')}      />      <Image        style={styles.logo}        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}      />    </View>  );}

属性

onLayout function 当元素挂载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}.

---

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

---

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

---

onLoadStart function 加载开始时调用。

---

resizeMode enum(‘cover’, ‘contain’, ‘stretch’) 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。
- cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
- contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白
- stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

---

source {uri: string}, number
uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。

---

style style
Flexbox…
Transforms…
resizeMode Object.keys(ImageResizeMode)
backgroundColor string
borderColor string
borderWidth number
borderRadius number
overflow enum(‘visible’, ‘hidden’)
tintColor string
opacity number

---

testID string
一个唯一的资源标识符，用来在自动测试脚本中标识这个元素。

---

IOS accessibilityLabel string 一个唯一的资源标识符，用来在自动测试脚本中标识这个元素。

---

IOS accessible bool 当此属性为真的时候，表示这个图片是一个启用了无障碍功能的元素。

---

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

---

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

---

IOS defaultSource {uri: string} 一个静态图片，当最终的图片正在下载的过程中时显示（loading背景图）。

---

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

---

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

方法

static getSize (uri: string, success: (width: number, height: number) => void, failure: (error: any) => void) 在显示图片前获取图片的宽高(以像素为单位)。如果图片地址不正确或下载失败,此方法也会失败。要获取图片的尺寸,首先需要加载或下载图片(同时会被缓存起来)。这意味着理论上你可以用这个方法来预加载图片,虽然此方法并没有针对这一用法进行优化,而且将来可能会换一些实现方案使得并不需要完整下载图片即可获取尺寸。所以更好的预加载方案是使用下面那个专门的预加载方法。

---

static profetch (url: string) 预加载一个远程图片(将其下载到本地磁盘缓存)