ReactNative Image控件

最新推荐文章于 2024-08-30 19:52:33 发布

原创最新推荐文章于 2024-08-30 19:52:33 发布 · 1k 阅读

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

本文介绍了React Native中图片的多种加载方式，包括本地图片、应用内图片及网络图片，并详细解释了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(完全不透明)