时间: 2019-06-08阅读: 276标签: 图片

ReactNative Image组件使用精解,

今日学习ReactNative认为到挺风趣的,在攻读的进度中,发现网络一些人写的文章内容过时了,那首借使ReactNative的版本晋级太快,假使您今后看风华正茂篇16竟然15年写的小说,把知识点和法定文书档案相比较下,会令你猛跌老花镜。所以奉劝各位想深造ReactNative的同室,采用学习材质必定要以官方文书档案和法定demo为准,别的质地为辅。

Image组件

在ReactNative中Image是用来展示图片的零部件,和开荒Android的时候ImageView控件肖似的功效。它能够用来显示网络图片、静态资源、一时的地面图片、以致本地球磁性盘上的图样(如相册)等。妥当的行使Image组件能更形象越来越直观的向顾客传达新闻。

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

在那处的静态能源指的是加载的js部分的图片,非android,ios原生应用下的能源文件,对于加载这种图片财富,大家通过require(‘图片文件相对本文件目录的的路线’State of Qatar引进图片文件,并将其设置到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到第11中学间,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)

永利开户送38元体验金 1

永利开户送38元体验金,在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来唤起客户图片正在加载,当加载成功隐蔽此控件。

永利开户送38元体验金 2

互联网图片加载监听

对此互联网图片的加载,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.native伊芙nt.loaded获取已经加载的深浅,通过event.native伊芙nt.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在线预览,也得以下载项目学习别的零零件。

源码传送门

如上便是本文的全部内容,希望对大家的上学抱有助于,也可望大家多多点拨帮客之家。

Image组件使用详细明白,
前段时间攻读ReactNative感觉到挺有意思的,在学习的进度中,开掘互连网一些人写的文章内容过时了,那第一是Reac…

最近,笔者背负的后台系统有贰个图片上传校验图片比例的需要,以前并没有做过这种要求,便查了有些质感总计了一下图片上传获取宽高的章程。想要获取图片的宽高首先要清楚图片的url;通常图片上传UI组件或协和包裹的零件都会拿走到图片的url,知道url就好办了,上代码。

var img_url = URL;//图片URL地址var imgObj = new Image();//创建对象imgObj.src = img_url;//改变图片地址console.log(imgObj.width + "" + imgObj.height)

what?为什么输出是00;其实小编也超出过那几个难题;原因是在输出从前图片还未有曾加载完,只要在图纸加载完后就能够获得到了;

var img_url = URL;//图片URL地址var imgObj = new Image();//创建对象imgObj.src = img_url;//改变图片地址imgObj.onload = function(){ console.log(imgObj.width + "" + imgObj.height)}

好了,那下就足以输出图片的宽高了;用这种格局功能不是超高,也足以用沙漏循环检查评定来落成,只要图片宽和高大肆大器晚成项大于0,就可得到到图片的宽和高;

// 记录当前时间戳var start_time = new Date().getTime()// 图片地址 后面加时间戳是为了避免缓存var img_url = ‘url‘+start_time// 创建对象var imgObj = new Image()// 改变图片的srcimgObj.src = img_url// 定时执行获取宽高var check = function(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高 if (imgObj.width0 || imgObj.height0) { var diff = new Date().getTime() - start_time; console.log(imgObj.width + "" + imgObj.height) clearInterval(set); }}var set = setInterval(check,40)

这种办法比onload方法实施效能会快一些;

相关文章