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
（原图片地址:http://ojm0517sf.bkt.clouddn.com/2.jpg）
style={{width:375,height:375}} //我们设置图片宽高
'cover': 在保持图片宽高比的前提下,缩放图片，直到宽度和高度都>=容器视图的尺寸（resizeMode的默认属性）。
效果:超出容器的部分不显示，就是说，图片可能显示不全。
cover效果如下：
image.png
'contain':在保持图片宽高比的前提下缩放图片，直到宽度和高度都<=容器视图的尺寸。
效果:图片完全显示,被包裹在容器中，容器中可能留有空白.
contain效果如下：
image.png
'stretch': 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
效果:图片被拉伸或失真.
stretch效果如下：
image.png
'repeat': 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
Android中使用会报错.
'center': 居中不拉伸，效果如下：
image.png
需要注意的是：用Image组件加载网络图片时,或者在原生目录下加载图片时,React Native都无法获取图片大小,无法完成渲染.所以必须在样式中声明图片的宽和高,如果没有声明，则图片将不会被展示在界面上。
参考文档
推荐阅读
React Native 学习笔记
Reac Native布局详细指南
React Native调试技巧与心得
React Native发布APP之签名打包APK
React Native应用部署、热更新-CodePush最新集成总结
网友评论