微信答题小程序_ReactNative Image组件使用详解

ReactNative Image组件使用详解       本篇文章主要介绍了ReactNative Image组件使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Image组件

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

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

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

 Image
 './reactlogo.png')}
 / 

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

加载原生图片资源

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

 Image
 source={{uri: 'launcher_icon'}}

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

 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: 'react/img/logo_og.png'}}

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

Image组件常用的属性

 style:

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

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

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

source

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

 Image
 'react/img/logo_small.png', width: 38, height: 38},
 {uri: 'react/img/logo_small_2x.png', width: 76, height: 76}, 
 uri: 'react/img/logo_og.png', width: 400, height: 400}
 / 

resizeMode

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

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


在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:web凡科抠图upport:1.0.1'
 // For WebP support, without animations
 compile 'com.facebook.fresco:web凡科抠图upport:1.0.1'

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

-.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
 .facebook.imagepipeline.bitma凡科抠图.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

ImageBackground

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

 ImageBackground
 'transparent'}}
 source={{uri: 'react/img/logo_og.png'}}
 Text >

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


网络图片加载监听

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

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

使用方法如下

 Image
 source={{uri:'react/img/logo_og.png'}}
 'visible'}]}
 onLoadStart={() = console.log('onLoadStart')}
 onLoad={(event) = console.log('onLoad') }
 onLoadEnd={() = console.log('onLoadEnd')}
 / 

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

 Image
 '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('react/img/logo_og.png');
prefetchTask.then(() = {
 //此处可设置状态,显示Image组件。此时组件会使用预加载的图片信息。而不用再次加载
 console.log('加载图片成功')
}, error = {
 console.log('加载图片失败')
})

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


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


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zzjzptp.cn/ganhuo/3354.html