用法:
1,加载项目资源图片
<Image source={require(
'./img/my_icon.png'
)} />
2,
加载使用
APP
中的图片
<Image source={{uri:
'ic_launcher'
}} style={{width:
40
, height:
40
}} />
3,加载网络图片
<Image source={{uri:
'http://img2.xxh.cc:8080/images/ZTT_1404756641470_image.jpg'
}} style= {{width:
100
,height:
100
}}/>
<Image source={{uri:"http://localhost:2112/lsdjf.jpg"}} style ={{width:}}></Image>
Image
属性方法
1.onLayout (function) 当
Image布局发生改变的,会进行调用该方法,调用的代码为
:
{nativeEvent:{layout: {x, y, width, height}}}.
2.onLoad (function):当图片加载成功之后,回调该方法
3.onLoadEnd (function):当图片加载失败回调该方法,该不会管图片加载成功还是失败
4.onLoadStart (fcuntion):当图片开始加载的时候调用该方法
5.resizeMode 缩放比例
,可选参数
('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候,会根据设置Mode进行缩
放或者裁剪图片
Image
样式风格
1.FlexBox 支持弹性盒子风格
2.Transforms 支持属性动画
3.resizeMode 设置缩放模式
4.backgroundColor 背景颜色
5.borderColor 边框颜色
6.borderWidth 边框宽度
7.borderRadius 边框圆角
8.overflow 设置图片尺寸超过容器可以设置显示或者隐藏
('visible','hidden')
9.tintColor 颜色设置
10.opacity 设置不透明度
0.0(透明
)-1.0(完全不透明
)