React Native可以通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源图片。接下来，我们介绍React Native加载图片的几种方式：

1. 网络图片加载

加载网络图片非常简单， 直接上代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Image //导入对应的API组件
} from 'react-native';

var imageUrl = 'http://ojm0517sf.bkt.clouddn.com/2.jpg';
export default class TestHello extends Component {
    render() {
        return (
           <View style={styles.container}>
                <Image style={{width:80,height:80}}
                       source={{uri:imageUrl}}/>
            </View>
        );
    }
}

由此可以看出，需要指定source标签，uri是对应的网络图片的地址。

2. 加载手机文件系统的图片资源:

使用uri的方式,指定目录

// Android的方式
<Image style={{width:80,height:80}}
       source={{uri:'file:///sdcard//Download/gdb.png'}}/>
// IOS由于存在沙盒机制，需要先获取沙盒目录，请自行尝试

3.加载原生图片:

原生图片资源: ios项目或者android项目下面的图片资源。
方式：将添加到对应的图片资源管理文件中.eg:ios 放到images.xacssets下 android放到drawable下
Android项目中,ReactNative只能加载显示drawable下的图片，而mipmap图片是无法加载的.

<Image 
        style={{width:80,height:80}}
        source={{uri:'icon'}}/>

4.加载本地图片:

使用本地图片资源时,可以不指定图片尺寸.默认情况下,会以图片的尺寸,进行显示.

<Image 
        source={require('./shell.png')}/>

require可以理解成: 使用了一个声明,进行预加载,等同于在代码中预先加载了图片资源.
但是以下红色方框中的方式会出错:

image.png

image.png

在RN开发中, 不允许使用字符串变量来指定需要预先加载的图片的名称.

因为React Native在编译代码时处理所有的require声明,而不是在运行时动态的处理,而var在运行时赋值,所以不能动态加载图片资源. 就会报上面的错误.

注意: 路径处理

require 中的图片名字必须是一个静态字符串。如果需要业务逻辑动态获取，应将条件判断的语句放到require 外。

// 正确写法: 
<Image source={require('./my-icon.png')} />
// 错误写法:
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

当项目日渐庞大，为了资源管理方便，我们想要有单独的目录来管理图片，那么，我们需要了解图片管理与目录索引。

图片管理与目录索引

当项目将图片放置指定的目录(非默认目录),进行索引的方式
eg: 创造一个目录结构如下:

image.png

app：与android和ios同目录
resource：存放项目中用到的各种资源（图片，颜色，通用样式等）
imgs：存放图片的文件夹
Images.js：图片管理类
编辑Images.js: 声明图片的引用路径

import React from 'react';
export default {
    common: {
        ic_launcher: require('./imgs/ic_launcher.png'),
        button_moeny: require('./imgs/guide_button_image.png')
    }
}
// common自定义的图片标签,require()参数为对应本地的图片路径

引用方式

<Image style={styles.imageStyle}
       source={Images.common.ic_launcher}/>
      // Images图片管理类，common自定义的图片标签，ic_launcher图片名称

多分辨率屏幕的适配

在React Native项目中，如果需要适配不同分辨率的屏幕，则需要采用iOS上对图片命名的方式，不同分辨率之间用@2x、@3x来区分（如：image.png，image@2x.png，image@3x.png），在代码中使用时，选择image.png 这样系统会自动根据屏幕分辨率，去选择该分辨率所对应的图片。请自行尝试.

Image resizeMode 图片拉伸方式

resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')
resizeMode 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。
我们通过对一张网络图片设置不同的拉伸方式，观察结果。原图效果：

image.png

style={{width:375,height:375}} //我们设置图片宽高

'cover': 在保持图片宽高比的前提下,缩放图片，直到宽度和高度都>=容器视图的尺寸（resizeMode的默认属性）。
效果:超出容器的部分不显示，就是说，图片可能显示不全。
cover效果如下：

image.png

'contain':在保持图片宽高比的前提下缩放图片，直到宽度和高度都<=容器视图的尺寸。
效果:图片完全显示,被包裹在容器中，容器中可能留有空白.
contain效果如下：

image.png

image.png

'repeat': 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
Android中使用会报错.
'center': 居中不拉伸，效果如下：

image.png

需要注意的是：用Image组件加载网络图片时,或者在原生目录下加载图片时,React Native都无法获取图片大小,无法完成渲染.所以必须在样式中声明图片的宽和高,如果没有声明，则图片将不会被展示在界面上。

参考文档

guthub上facebook关于Image的介绍

推荐阅读

React Native 学习笔记
Reac Native布局详细指南
React Native调试技巧与心得
React Native发布APP之签名打包APK
React Native应用部署、热更新-CodePush最新集成总结