React Native常用组件之Image

2016-02-24 23:39小小哆iOSDev,React Native相关评论(0)

一、前言

  • 在开发中还有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片

二、Image组件的基本用法

  • 从当前项目中加载图片

      <View style={styles.container}>
          <Text style={styles.textMarginTop}>加载本地的图片</Text>
          <Image source={require('./img/2.png')} style={{width: 120, height: 120}}  />
      </View>
    • 该图片资源文件的查找和JS模块相似,该会根据填写的图片路径相对于当前的js文件路径进行搜索。
    • RN更加好的是Packager会根据平台选择相应的文件,例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)。会分别根据android或者ios平台选择相应的文件。
  • 加载使用APP中的图片

    <View style={styles.container}>
      <Text style={styles.textMarginTop}>加载Xcode中的图片</Text>
      <Image source={require('image!icon_homepage_map')} style={{width: 50,height:50}}/>
    </View>
    • 使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)
  • 加载来自网络的图片

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

      <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.stretch}}>
             <Text style={{marginTop: 60, backgroundColor: 'red'}}>下面是背景图片</Text>
      </Image>
    • 运行的效果:
      1.png

三、Image组件的常见属性

    • 属性方法

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

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

    四、Image组件的小练习

    • 通过一款包包的展示,总结前面所学的View,Text和今天的Image组件,具体代码如下:
      2.png

    3.png
    4.png

    • 运行效果如下:
      5.png
    上一篇 React Native常用组件之TextReact Native常用组件之ListView 下一篇
    评论 0
    由于之前使用多说插件出现问题,导致以前的评论丢失,在此深表歉意!

    站点统计

    • 建站日期:2014-12-06
    • 最后更新:2016-05-19
    • 运行时间:2001 天
    • 文章数量:44 篇