ReactNative Image组件使用详解


Posted in Javascript onAugust 07, 2017

最近学习ReactNative感觉到挺有意思的,在学习的过程中,发现网上一些人写的文章内容过时了,这主要是ReactNative的版本升级太快,如果你现在看一篇16甚至15年写的文章,把知识点和官方文档对比下,会让你大跌眼镜。所以奉劝各位想学习ReactNative的同学,选择学习资料一定要以官方文档和官方demo为准,其他资料为辅。

Image组件

在ReactNative中Image是用于显示图片的组件,和开发Android的时候ImageView控件相同的效果。它可以用来显示网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等。恰当的使用Image组件能更形象更直观的向用户传达信息。

Image组件加载项目中的静态资源

在这里的静态资源指的是加载的js部分的图片,非android,ios原生应用下的资源文件,对于加载这种图片资源,我们通过require('图片文件相对本文件目录的的路径')引入图片文件,并将其设置到Image组件的source属性即可。如下

<Image
 style={styles.image}
  //  ./表示当前文件目录 ../ 父目录
   source={require('./reactlogo.png')}
 />

需要注意的一点是,上面require中不能用字符串拼接路径,否则会加载报错。

加载原生图片资源

在此所说的原生资源指的我们开发android的时候再res目录下的drawable,或者mipmap目录。以及ios下对应的资源目录。对于加载这种图片资源和加载项目中的资源有点不一样,此处以android为例,如下加载drawable下的文件

<Image
 source={{uri: 'launcher_icon'}}
 style={{width: 38, height: 38}}
/>);

除了通过上面方式加载也可以通过下面方式

<Image
 source={nativeImageSource({
 android: 'launcher_icon',
 width: 96,
 height: 96
  })}
/>

nativeImageSource中可以指定图片宽高,如果同时在image组件的样式属性style设置宽高的话,最终宽高是以style中宽高为准。在上面默认加载的是drawable下的图片资源,如果想加载mipmap中的资源,可以如下

<Image
 source={nativeImageSource({
 android: 'mipmap/launcher_icon',
 width: 96,
 height: 96
 })}
/>

通过上面方式,我们就可以加载图片了,如果是新加到drawable下的图片需要重新编译运行,否则是不生效的。

加载网络图片

<Image
 source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
 style={{width: 38, height: 38}}
/>);

对于加载网络图片需要注意的一点就是,需要指定样式的宽和高,否则图片将不显示(不设置默认宽和高为0了)。

Image组件常用的属性

 style:

  • width :设置图片的宽
  • height:设置图片的高
  • borderWidth:设置边框宽度
  • borderColor :设置边框颜色
  • backgroundColor:设置背景色(有些图片是透明背景时,一般会用到这个属性)
  • opacity:不透明度,值在0到1之间,1表示不透明,0表示透明。
  • tintColor :给图片着色,这个属性用处较多,如,一个黑白图片,常常会点击时变成其他颜色图片,此时可用此属性

blurRadius 设置图片的模糊半径,可模糊图片

defaultSource 给图片设置默认图片,用于加载网络成功之前显示的图片。(ios支持)

source

在上面我们介绍了source属性加载不同的图片资源,但是还有一个没讲到,它可以接收一个数组作为参数,这样可根据组件的宽和高自动加载与之匹配的宽和高的图片。使用方式如下

<Image
  style={{flex: 1}}
  source={[
       {uri: 'https://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
       {uri: 'https://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},     
        uri: 'https://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
      ]}
 />

resizeMode

该属性用来设置图片的缩放模式,对应值如下

  • cover:保持图片宽高比,直到宽度和高度都大于等于容器视图的尺寸(参考下图效果)
  • contain:在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸
  • stretch:拉伸图片且不维持宽高比,直到宽高都刚好填满容器
  • center 居中不拉伸
  • repeat:重复平铺图片直到填满容器。图片会维持原始尺寸。(iOS)

ReactNative Image组件使用详解

在Android上支持GIF和WebP格式图片

默认情况下Android是不支持GIF和WebP格式的。你需要在build.gradle文件中根据需要添加对应的依赖。

dependencies {
 // If your app supports Android versions before Ice Cream Sandwich (API level 14)
 compile 'com.facebook.fresco:animated-base-support:1.0.1'

 // For animated GIF support
 compile 'com.facebook.fresco:animated-gif:1.0.1'

 // For WebP support, including animated WebP
 compile 'com.facebook.fresco:animated-webp:1.0.1'
 compile 'com.facebook.fresco:webpsupport:1.0.1'

 // For WebP support, without animations
 compile 'com.facebook.fresco:webpsupport:1.0.1'
}

如果你在使用GIF的同时还使用了ProGuard,那么需要在proguard-rules.pro中添加如下规则

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
 public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

ImageBackground

该组件是Image组件的扩展,它支持嵌套组件。如在图片上显示一个文本,则可以通过如下实现

<ImageBackground
        style={{width: 100, height: 100, backgroundColor: 'transparent'}}
        source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
      >
        <Text style={styles.nestedText}>
          React
        </Text>
      </ImageBackground>

实现效果图如下,一般的我们可以嵌套ActivityIndicator来提示用户图片正在加载,当加载完成隐藏此控件。

ReactNative Image组件使用详解

网络图片加载监听

对于网络图片的加载,ReactNative提供了一些属性用于图片不同加载时期的监听。

  • onLoadStart:图片开始加载时调用
  • onLoad:图片加载完成时调用,此时图片加载成功
  • onLoadEnd:加载结束后调用,与onLoad不同的是不论成功还是失败,此回调函数都会被执行。

使用方法如下

<Image
        source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
        style={[styles.base, {overflow: 'visible'}]}
        onLoadStart={() => console.log('onLoadStart')}
        onLoad={(event) => console.log('onLoad') }
        onLoadEnd={() => console.log('onLoadEnd')}
      />

对于iOS,还提供了加载进度的回调函数onProgress

<Image
  style={styles.image}
  onProgress={(event) => {
   console.log('onProgress')
   this.setState({
    progress: Math.round(100 * event.nativeEvent.loaded / event.nativeEvent.total)
  })}}/>

可以通过参数event.nativeEvent.loaded获取已经加载的大小,通过event.nativeEvent.total获取图片的总大小。

不仅如此,ReactNative还提供了预加载图片函数prefetch(url: string),它可以将图片下载到磁盘缓存

var prefetchTask = Image.prefetch('https://facebook.github.io/react/img/logo_og.png');
prefetchTask.then(() => {
  //此处可设置状态,显示Image组件。此时组件会使用预加载的图片信息。而不用再次加载
  console.log('加载图片成功')
}, error => {
  console.log('加载图片失败')
})

好了,今天就介绍到这里,文中若有错误的地方欢迎指正,再次感谢。文中一些示例源码,可前往GitHub在线预览,也可以下载项目学习其他组件。

源码传送门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析jquery获取父窗口的元素
Jun 26 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 #Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 #Javascript
JS判断微信扫码的方法
Aug 07 #Javascript
AngularJs每天学习之总体介绍
Aug 07 #Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 #Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 #Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 #Javascript
You might like
PHP执行速率优化技巧小结
2008/03/15 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
php抽象类用法实例分析
2015/07/07 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
js DOM的学习笔记
2011/12/22 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
浅析Jquery操作select
2016/12/13 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
django实现类似触发器的功能
2019/11/15 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
git stash(储藏)的用法总结
2022/06/25 Servers