React Native 图片组件 Image

原生 iOS 使用 UIImage 来显示一张图片，原生 Android 开发使用 ImageView 来显示图片。

React Native 对 UIImage 和 ImageView 进行封装，提供了 Image 组件用来显示图片。

Image 组件还同时解决了访问网络图片复杂的问题，把显示网络图片给简化了。

React Native 图片组件 Image

React Native 内建了图片组件 Image 来显示图片，这个组件既可以显示本地图片，也可以显示网络图片，还可以显示 base64 格式的图片。

引入组件

使用 Image 组件首先需要引入此组件，引入组件语法和引入其它组件的语法相同

import { Image } from 'react-native'

使用组件

Image 组件的基本使用语法如下

<Image 
   style  = {image_style}
   source = {image_url} 
   resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

Image 组件既可以显示本地图片也可以显示网络图片，但它们的语法格式有点不同。

显示本地图片的语法格式为

<Image 
   style  = {image_style}
   source = {require('./image_path')} 
   resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

显示网络图片的语法格式为

<Image 
   style  = {image_style}
   source={{uri: 'image_url'}
   resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

显示 base64 格式的图片的语法格式为

<Image 
   style  = {image_style}
   source={{uri: 'uri: data:image/png;base64,[image_base64_data]'}
   resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

注意： 显示网络图片和显示 base64 格式的图片，style 样式中一定要包含 width 和 height 属性。

使用范例如下

显示本地图片

<Image
    source={require('/react-native/img/favicon.png')}
/>

显示网络图片

<Image
    style={{width: 50, height: 50}}
    source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

显示 base64 格式图片

<Image
    style={{width: 66, height: 58}}
    source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>

属性

Image 组件有很多属性，但常用的且跨平台的属性真心不多，我们列举几个常用的介绍下。

1. style 属性。

   除了默认的跟 相同的属性外， 中的 style 属性还支持一下属性

2. source 属性。

source 属性用于设置图片的地址，图片地址可以是本地图片，网络图片和 base64 格式的图片。

使用方式我们上面已经介绍过了。

1. loadingIndicatorSource 属性。

   loadingIndicatorSource 属性用于加载网络图片时的 placeholder 图片。也可以说是图片加载指示器。

   它的使用格式和 source 属性一样，但不能是网络图片，只能是本地图片或 base64 格式图片。

2. resizeMethod 属性。

   resizeMethod 属性用于设置图片如何适配图片组件。默认值为 auto。

   可选的值有： 'cover', 'contain', 'stretch', 'repeat', 'center'。

范例 1

下面的代码，我们使用 Image 组件分别显示本地图片、网络图片和 base64 图片。

你需要将下面的图片下载到项目的根目录下

App.js

import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View>
        <Image
          source={require('./img1.jpg')}
        />
        <Image
          style={{margin:10,width: 177, height: 100}}
          source={{uri: 'https://www.twle.cn/static/i/img1.jpg'}}
        />
        <Image
          style={{margin:10,width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

显示效果如下