ReactNative Component 之 Image

1.首先熟悉Image属性

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(相对路径)来引用）

2.如何使用Image

2.1 效果图：

2.2 核心代码:

class TestRTC extends Component {

onLoad(){

console.log('success');

}

onLoadStart(){

console.log('load start');

}

onLoadEnd(){

console.log('load end');

}

本文参考http://reactnative.cn/docs/0.35/image.html#content