# React Native 图片组件 Image

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

React Native 对 UIImageImageView 进行封装,提供了 Image 组件用来显示图片。

img

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

# React Native 图片组件 Image

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

# 引入组件

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

import { Image } from 'react-native'
1

# 使用组件

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

<Image 
   style  = {image_style}
   source = {image_url} 
   resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>
1
2
3
4
5

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

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

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

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

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

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

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

注意: 显示网络图片和显示 base64 格式的图片,style 样式中一定要包含 widthheight 属性。

# 使用范例如下

显示本地图片

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

显示网络图片

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

显示 base64 格式图片

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

# 属性

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

  1. style 属性。

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

    属性 类型 说明
    borderTopRightRadius number 设置右上角的圆角度数,默认值为 0
    borderBottomLeftRadius number 设置左下角的圆角度数,默认值为 0
    borderBottomRightRadius number 设置右下角的圆角度数,默认值为 0
    borderTopLeftRadius number 设置左上角的圆角度数,默认值为 0
    borderRadius number 统一设置四个角的圆角度数,默认值为 0
    borderColor color 设置边框的颜色
    borderWidth number 设置边框的宽度,默认值为 0
    backgroundColor color 设置图片组件的背景色
    opacity number 设置图片组件的透明度
    overflow string 当组件超出屏幕宽高时是否可见, 'visible' 显示, 'hidden' 隐藏
    backfaceVisibility string 定义当组件不面向屏幕时是否可见, 'visible' 显示, 'hidden' 隐藏
    tintColor color 将所有非透明的图片像素改为此颜色
    resizeMode string 设置图片如何适应图片容器,可选的值有: 'cover', 'contain', 'stretch', 'repeat', 'center'
  2. source 属性。

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

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

  3. loadingIndicatorSource 属性。

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

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

  4. resizeMethod 属性。

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

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

    说明
    auto 由系统自己在 resizescale 之间选择
    resize 显示之前先进行重新调整大小,当图片超出组件太多的时间建议使用此值
    scale 缩放图片,当地图片比组件小或者图片和组件差不多大小时使用此值

# 范例 1

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

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

img

# 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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

显示效果如下

React Native 图片组件 Image

Last Updated: 8/9/2022, 4:24:39 PM