Image

参考文档

用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

属性

属性	类型	必填	描述
blurRadius	number	否	blurRadius(模糊半径)：为图片添加一个指定半径的模糊滤镜。
onLayout	function	否	当元素加载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}.
onLoad	function	否	加载成功完成时调用此回调函数。
onLoadEnd	function	否	加载结束后，不论成功还是失败，调用此回调函数
onLoadStart	function	否	加载开始时调用
resizeMode	enum('cover', 'contain', 'stretch', 'repeat', 'center')	否	决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。 cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。 contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白。 stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。 repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。 center: 居中不拉伸。
source	ImageSourcePropType	否	图片源数据（远程 URL 地址或本地数据）。目前原生支持的图片格式有png、jpg、jpeg、bmp、gif、webp (仅 Android)、psd (仅 iOS)。
loadingIndicatorSource	array of ImageSourcePropTypes, number	否	此属性表示用于渲染图像的加载指示符的资源，显示该资源直到显示图像准备好显示为止，通常是从网络下载图像之后。
onError	function	否	当加载错误的时候调用此回调函数，参数为{nativeEvent: {error}}
testID	string	否	一个唯一的资源标识符，用来在自动测试脚本中标识这个元素。
resizeMethod	enum('auto', 'resize', 'scale')	否	当图片实际尺寸和容器样式尺寸不一致时，决定以怎样的策略来调整图片的尺寸。默认为auto。 auto: 使用启发式算法来在resize和scale中自动决定。 resize: 在图片解码之前，使用软件算法对其在内存中的数据进行修改。当图片尺寸比容器尺寸大得多时，应该优先使用此选项。 scale: 对图片进行缩放。和resize相比，scale速度更快（一般有硬件加速），而且图片质量更优。在图片尺寸比容器尺寸小或者只是稍大一点时，应该优先使用此选项。(Android平台)
accessibilityLabel	node	否	设置一段文字。当用户与图片交互时，读屏器（无障碍功能）会朗读你所设置的这段文字。（iOS平台）
accessible	bool	否	当此属性为 true 时，表示此图片是一个启用了无障碍功能的元素。（ios平台）
capInsets	object: {top: number, left: number, bottom: number, right: number}	否	当图片被缩放的时候，capInsets 指定的角上的尺寸会被固定而不进行缩放，而中间和边上其他的部分则会被拉伸。这在制作一些可变大小的圆角按钮、阴影、以及其它资源的时候非常有用（译注：这就是常说的九宫格或者.9 图。（iOS平台）
defaultSource	object, number	否	在读取图片时默认显示的图片。仅限 iOS 使用。一般格式为 {uri: string, width: number, height: number, scale: number}: uri - 是一个表示图片的资源标识的字符串，它可以是一个本地文件路径或是一个静态资源引用（使用require(相对路径)来引用）。 width, height - 如果你知道图片的尺寸，那么可以在这里指定。这一尺寸会被用作组件的默认尺寸。 scale - 图片的缩放系数。默认是 1.0，意味着每一个图片像素都对应一个设备独立像素（DIP）。 number - 静态图片引用语法require('./image.jpg')所返回的资源 id。（ios平台）
onPartialLoad	function	否	如果图片本身支持逐步加载，则逐步加载的过程中会调用此方法。“逐步加载”的具体定义与具体的标准和实现有关。（iOS平台）
onProgress	function	否	在加载过程中不断调用，参数为{nativeEvent: {loaded, total}}。（ios平台）
fadeDuration	number	否	仅适用于Android。默认情况下为300ms。（Android平台）

方法

getSize()

Image.getSize(uri, success, [failure]);

在显示图片前获取图片的宽高(以像素为单位)。如果图片地址不正确或下载失败,此方法也会失败。

要获取图片的尺寸,首先需要加载或下载图片(同时会被缓存起来)。这意味着理论上你可以用这个方法来预加载图片，虽然此方法并没有针对这一用法进行优化，而且将来可能会换一些实现方案使得并不需要完整下载图片即可获取尺寸。所以更好的预加载方案是使用下面那个专门的预加载方法。

此方法不能用于静态图片资源。

参数：

名称	类型	必填	说明
uri	string	是	图片地址
success	function	是	成功的回调函数，返回图片宽高数据
failure	function	否	失败的回调函数

prefetch()

Image.prefetch(url);

预加载一个远程图片(将其下载到本地磁盘缓存)。

名称	类型	必填	说明
url	string	是	图片的远程地址

abortPrefetch()

Image.abortPrefetch(requestId);

中断预加载操作。仅 Android 可用。

名称	类型	必填	说明
requestId	number	是	prefetch()返回的 id

queryCache()

Image.queryCache(urls);

查询图片缓存状态。根据图片 URL 地址返回缓存状态，比如"disk"（缓存在磁盘文件中）或是"memory"（缓存在内存中）。

名称	类型	必填	说明
urls	array	是	要查询缓存状态的图片 URL 数组

resolveAssetSource()

Image.resolveAssetSource(source);

将资源解析为具有uri，width和height属性的对象

名称	类型	必填	说明
source	number, object	是	静态图片引用语法require('./image.jpg')所返回的资源 id 或是一个ImageSource.

ImageSource是一个对象，其结构为{ uri: '' }

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

默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在android/app/build.gradle文件中根据需要手动添加以下模块：

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  compile 'com.facebook.fresco:animated-base-support:1.8.1'

  // 如果你需要支持GIF动图
  compile 'com.facebook.fresco:animated-gif:1.8.1'

  // 如果你需要支持WebP格式，包括WebP动图
  compile 'com.facebook.fresco:animated-webp:1.8.1'
  compile 'com.facebook.fresco:webpsupport:1.8.1'

  // 如果只需要支持WebP格式而不需要动图
  compile 'com.facebook.fresco:webpsupport:1.8.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);
}

Example

示例

下面的例子分别演示了如何显示从本地缓存、网络甚至是以'data:'的 base64 uri 形式提供的图片。

请注意对于网络和 base64 数据的图片需要手动指定尺寸！

import React, { Component } from 'react';
import {  View, Image,StyleSheet } from 'react-native';
export  class pageComponent extends Component {
    constructor(props) {
        super(props);
        this.imageSource={uri: 'https://XXXXXXX/a.png'};
        this.imageSourceTwo={uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='};
    }
    render() {
        return (
            <View>
                <Image
                    source={require('../img/demo.png')}
                />
                <Image
                    style={styles.image}
                    source={this.imageSource}
                />
                <Image
                    style={styles.imageTwo}
                    source={this.imageSourceTwo}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    image: {
        width: 50,
        height: 50
    },
    imageTwo: {
        width: 66,
        height: 58
    },
});

3.1.3 Image