混合开发的大趋势之一React Native之Image (脑动理解)

文章是宝宝自己写的，你可以转走，标明哪来的就行王亟亟的大牛之路

国庆这些天要么旅游要么WOW，感觉整个人都废了。。

直接从黄种人晒成了非洲大酋长。。然而还是无橙，这礼拜要做7天，昨天把单元测试的东西整完后今天下午抽出时间继续学习，然后就补一篇RN 主件的文章，知识点源于官方文档

原文地址：https://github.com/facebook/react-native/blob/master/docs/Images.md

效果图

第一种为：加载RN项目下的图片

第二种为：加载网络图片

第三种为：加载Android项目的图片资源+图片作为背景

---

加载RN项目下的图片

如果你需要引用RN项目目录下的图片资源，就像使用html中的引用一样，使用相对路径去找

目录如下

在我们的android.js同级有一个img文件夹，里面有一个sample.jpg文件，而它就是我们所需要的

  <Image source = {require('./img/sample.jpg')}/>

这样就可以使用到我们的图片了给 source属性利用require()给其传第一个图片地址，然后就可以渲染到<Image/>上

当然有时候你的值是可变的，那也可以传入一个对象去引用，如

var icon = this.props.active ? 'sample' : 'sample1';
<Image source={require('./' + icon + '.png')} />

但是以上写法不是很好，我们尽量在渲染的时候给出正确的引用值，可以这样：

var icon = this.props.active ? require('./sample.png') : require('./sample1.png');
<Image source={icon} />

一般来说我们的图片资源本身大小不可控，所以我们会给控件预设一个尺寸，像这样

  <Image source = {require('./img/sample.jpg')} style = {{ width : 230, height : 300}}/>

---

加载网络图片

我们的APP不可能是一个纯离线产品，那网络图片就是必不可少，RN加载图片就比远程环境方便，给出正确的UR，就和网页加载图片一样

  <Image source = {{uri : '图片地址'}} style = {{ width : 230 , height : 220}}/>

还是和家在本地图片一样，官方希望大家给定控件的尺寸。

因为你的图片尺寸不可控，当加载出来后把用户第一次看到的布局给整变形了，这是一个很不好的用户体验。

Note:这里补充下 我们的uri 属性 是 object 类型的。

---

加载Android项目的图片资源

那既然可以加载RN项目里的图片，必然也可以加载android项目下的图片，加载方式大同小异

  <Image style = {{ width : 230, height : 230}} source={require('image!timg')} />

唯一区别就是 在值里加一个 imge!文件名，不需要后缀哦！

---

图片作为背景

其实图片也可以作为一个父容器，也就是类似于背景的效果，使用非常简单，在<Image></Image> 中间加就行,像这样

<Image style = {{ width : 230, height : 230}} source={require('image!timg')} >
              <Text>在里面</Text>
          </Image>

源码地址：https://github.com/ddwhan0123/ReactNativeDemo/blob/master/ImageDemo.js

这礼拜7天，大家HOLD住