React Native 常用组件之 Image

96
雷国林
2016.12.15 22:35* 字数 667

一、前言

在开发中还有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源。

二、Image组件的基本用法

  • 从当前项目中加载图片
    <Image source={require('./img/01.png')} style={{width: 120, height: 120}}  />
    

该图片资源文件的查找和JS模块相似,该会根据填写的图片路径相对于当前的js文件路径进行搜索。
此外,React Naive的Packager会根据平台选择相应的文件,例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios),会分别根据android或者ios平台选择相应的文件。

  • 加载使用APP中的图片
    <Image source={require('image!icon_homepage_map')} style={{width: 50,height:50}}/>
    

使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)

  • 加载来自网络的图片

客户端的很多图片资源基本上都是实时通过网络进行获取的,写法和上面的加载本地资源图片的方式不太一样,这边一定需要指定图片的尺寸大小,实现如下:
<Image
source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}
style={{flex:1,width:200, height:100, resizeMode:cover}}
/>

  • 图片拉伸模式resizeMode:
    cover:图片居中显示,没有被拉伸,超出部分被截断;
    contain:容器完全容纳图片,图片等比例进拉伸;
    **stretch: **图片被拉伸适应容器大小,有可能会发生变形。

三、Image组件的常见属性

  • onLayout (function):Image布局发生改变的,会进行调用该方法,调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}
  • onLoad (function):当图片加载成功之后,回调该方法
  • onLoadEnd (function):当图片加载失败回调该方法,该不会管图片加载成功还是失败
  • onLoadStart (fcuntion):当图片开始加载的时候调用该方法
  • resizeMode (string):缩放比例,可选参数('cover', 'contain', 'stretch')该当图片的尺寸超过布局的尺寸的时候,会根据设置Mode进行缩放或者裁剪图片
  • source{uri:string}:进行标记图片的引用,该参数可以为一个网络url地址或者一个本地的路径

四、样式风格属性

  • FlexBox 支持弹性盒子风格
  • Transforms 支持属性动画
  • backgroundColor 背景颜色
  • borderColor 边框颜色
  • borderWidth 边框宽度
  • borderRadius 边框圆角
  • overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')
  • tintColor 颜色设置
  • opacity 设置不透明度0.0(透明)-1.0(完全不透明)
React Native
Web note ad 1