ReactNative Image组件使用详解

最近学习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)

在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提供了一些属性用于图片不同加载时期的监听。

  • 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在线预览,也可以下载项目学习其他组件。

源码传送门

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

(0)

相关推荐

  • ReactNative Image组件使用详解

    最近学习ReactNative感觉到挺有意思的,在学习的过程中,发现网上一些人写的文章内容过时了,这主要是ReactNative的版本升级太快,如果你现在看一篇16甚至15年写的文章,把知识点和官方文档对比下,会让你大跌眼镜.所以奉劝各位想学习ReactNative的同学,选择学习资料一定要以官方文档和官方demo为准,其他资料为辅. Image组件 在ReactNative中Image是用于显示图片的组件,和开发Android的时候ImageView控件相同的效果.它可以用来显示网络图片.静态

  • ReactNative支付密码输入框实现详解

    目录 正文 hooks版本 正文 项目中需求如果涉及钱包,支付等功能,可以大概率会用到输入密码组件,也算是个常见组件吧. 之前写过一个纯js的开源组件,使用的类的形式,也比较老了,可直接添加npm库到项目中进行使用. hooks版本 最近项目需要,又重新写了一个hooks版本的,现在直接上源码,对于不想添加依赖库的伙伴,可直接复制源码到项目中,直接使用. 'use strict'; import React, {useRef, useState} from 'react'; import {St

  • Vue 过渡(动画)transition组件案例详解

    Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

  • 通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

  • react-native中AsyncStorage实例详解

    react-native中AsyncStorage实例详解 AsyncStorage是一个简单的,具有异步特性的储存API,它的储存方式为键值对的方式,且对整个App而言,是全局的. AsyncStorage提供了较全的方法供我们使用,每个方法都有一个回调函数,而回调函数的第一个参数都是错误对象error,所有的方法执行之后都会返回一个Promise对象. 方法: static getItem(key: string, callback?: ?(error: ?Error, result: ?s

  • Bootstrap进度条组件知识详解

    在网页中,经常见到进度条效果,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本中并不支持,Opera 12 不支持 animation 属性. 进度条和其他独立组件一样,开发者可以根据自己的需要选择对应的版本: LESS: progress-bars.less SASS: _progress-bars.scss 基础进度条 实现原理: 需要两个容器,外容器使用类名.progre

  • Spring组件自动扫描详解及实例代码

    Spring组件自动扫描详解及实例代码 问题描述 一个系统往往有成千上万的组件,如果需要手动将所有组件都纳入spring容器中管理,是一个浩大的工程. 解决方案 Spring 提供组件扫描(component scanning)功能.它能从classpath里自动扫描.侦测和实例化具有特定注解的组件.基本的注解是@Component,它标识一个受Spring管理的组件.其他特定的注解有@Repository.@Service和@Controller,它们分别标识了持久层.服务处和表现层的组件.

  • vue实现简单表格组件实例详解

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩

  • Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

  • 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数.同时在工作中,我们还会发现,有一些ajax请求的数据,对实时性要求不高,即使我们把第一次请求到的这些数据缓存起来,然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响,通过这种手工的缓存控制,减少了ajax请求,多多少少也能帮助我们提高网页的性能.本文介绍我自己关于这两方

随机推荐