ReactNative Image控件

用法:

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(完全不透明 )
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值