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