最近学习ReactNative感觉到挺有意思的，在学习的过程中，发现网上一些人写的文章内容过时了，这主要是ReactNative的版本升级太快，如果你现在看一篇16甚至15年写的文章，把知识点和官方文档对比下，会让你大跌眼镜。所以奉劝各位想学习ReactNative的同学，选择学习资料一定要以官方文档和官方demo为准，其他资料为辅。

Image组件

在ReactNative中Image是用于显示图片的组件，和开发Android的时候ImageView控件相同的效果。它可以用来显示网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。恰当的使用Image组件能更形象更直观的向用户传达信息。

Image组件加载项目中的静态资源

在这里的静态资源指的是加载的js部分的图片，非android,ios原生应用下的资源文件，对于加载这种图片资源，我们通过require('图片文件相对本文件目录的的路径')引入图片文件，并将其设置到Image组件的source属性即可。如下

需要注意的一点是，上面require中不能用字符串拼接路径，否则会加载报错。

加载原生图片资源

在此所说的原生资源指的我们开发android的时候再res目录下的drawable，或者mipmap目录。以及ios下对应的资源目录。对于加载这种图片资源和加载项目中的资源有点不一样，此处以android为例，如下加载drawable下的文件

除了通过上面方式加载也可以通过下面方式

nativeImageSource中可以指定图片宽高，如果同时在image组件的样式属性style设置宽高的话，最终宽高是以style中宽高为准。在上面默认加载的是drawable下的图片资源，如果想加载mipmap中的资源，可以如下

通过上面方式，我们就可以加载图片了，如果是新加到drawable下的图片需要重新编译运行，否则是不生效的。

加载网络图片

对于加载网络图片需要注意的一点就是，需要指定样式的宽和高，否则图片将不显示（不设置默认宽和高为0了）。

Image组件常用的属性

502092691920S" style="display: none">style：

• width :设置图片的宽
• height：设置图片的高
• borderWidth：设置边框宽度
• borderColor ：设置边框颜色
• backgroundColor：设置背景色（有些图片是透明背景时，一般会用到这个属性）
• opacity：不透明度，值在0到1之间，1表示不透明，0表示透明。
• tintColor ：给图片着色，这个属性用处较多，如，一个黑白图片，常常会点击时变成其他颜色图片，此时可用此属性

blurRadius 设置图片的模糊半径，可模糊图片

defaultSource 给图片设置默认图片，用于加载网络成功之前显示的图片。（ios支持）

source

在上面我们介绍了source属性加载不同的图片资源，但是还有一个没讲到，它可以接收一个数组作为参数，这样可根据组件的宽和高自动加载与之匹配的宽和高的图片。使用方式如下

<div class="jb51code">
<pre class="brush:xhtml;">
<Image
style={{flex: 1}}
source={[
{uri: 'https://facebook.github.io/react/img/logo_small.png',width: 38,height: 38},{uri: 'https://facebook.github.io/react/img/logo_small_2x.png',width: 76,height: 76},uri: 'https://facebook.github.io/react/img/logo_og.png',width: 400,height: 400}
]}
/>