前言

之前有人问我学习一门技术，怎么样才能最快速的掌握一门技术，我的回答是写博客或者给别人讲解。

这两种方式有一个共性，那就是都需要专研。我们自己去学习的时候，容易有一种得过且过的心理，比如：“算了，不研究了，我知道怎么写就行”。但当你写博客或者讲解的时候，就不能有这样的心态了，你得专研他到底是什么原理，这样你在写博客或者给别人讲解的过程中，你才会更加自信。同时你自己也再一步一步的提升。

废话不多说了，本篇内容如下：

• 组件Image
• 九宫格案例来复习之前学习的知识

一、组件Image

• 在开发中有一个非常重要的组件Image，通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源

• 从当前RN项目中加载图片

  <Image source={require("./img/2.png")} />
  

  • RN中引入其他文件中的内容基本都是使用require引用，图片也不例外

  • require后面的路径跟img中src中的路径基本相似，但有两个比较重要的点

    • 同级目录的话require的做法是在路径前面加【./】来标识，如下图的的引入方式为
    11.png

      <Image source={require("./img/2.png")} />
    

    • 在html中img中src的路径是可以拼接的，但rn中使用require引入图片的话路径目前是不可拼接的。比如如下的两种写法就会报错

      var imgSrc = "./img/2.png";
       //错误示范1
      <Image source={require(imgSrc )}>
      //错误示范2
      var imgName = "2.png";
      <Image source={require("./img/"+imgName)}>
      

  • React Native的Packager会根据平台选择相应的文件，例如：my_icon.ios.png和my_icon.android.png两个文件，加载时会根据平台选择相应的文件

• 从Android或iOS项目中加载图片

  <View>
     <Image source={{uri:"1.jpg"}) style={{width:50,height:50}}}
  </View>
  

  • 必须将图片放到iOS项目中的asset文件夹或者Android drawable文件夹(如果不知道这两个文件，自行百度)，当项目在iOS端运行时会自动加载asset中的图片，在android端运行时会自动加载drawable中的图片

• 加载来自网络的图片

  跟加载iOS项目和android项目中图片的方式一样，只不过，加载网络中的图片时，需要指定一下图片的尺寸

  <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{width:200, height:100}}/>
  

• 注意

当你在android和iOS项目中增加图片后，仅仅reload, 图片是无法显示的，你必须要重新安装这个软件

• Image组件常用属性

  • onLayout(function)

    当Image布局发生改变时，会调用该方法

  • onload(function)

    当图片加载成功之后，回调该方法

• onloadEnd(function)

  当图片加载完成回调该方法，不会管图片加载成功还是失败

• onloadStart(function)

  当图片开始加载时调用该方法

• resizeMode

  Image.resizeMode.cover：   图片居中显示，没有被拉伸，超出部分被截断；
  Image.resizeMode.contain： 容器完全容纳图片，图片等比例进拉伸；
  Image.resizeMode.stretch： 图片被拉伸适应容器大小，有可能会发生变形
  

• source

  进行标记图片的引用，该参数可以作为一个网络url地址或者一个本地的路径

二、九宫格案例

• 这个案例基本将我们之前学习的内容都给复习了。如果能独立敲出来，你就可以信心饱满的进行下一步的学习，如果不能独立敲出来，建议你多看着敲几遍，把RN的编程方式熟烂于心，再进行下一步的学习，开始之前先看一下我们要做的效果

九宫格效果图

• 准备工作

1. 将source文件夹中的BadgeData.json文件放到跟index.android.js同级的目录里

2. 将source中的图片放到android的drawable文件夹和iOS的asset文件夹, 点击创建drawable文件夹,iOS的自行百度

3. 在index.android.js的同级目录下新建一个js文件，统一取名为index.main.js

• 编码思路

  1. 看图我们可以大概得出这个项目的UI结构如下

     最底下的白色背景是一个全屏的View,每个灰色的色块是一个小View,小View里面又包含了一个Image和Text.

  2. 界面出来以后，我们在大概的看一下json数据结构，不懂json自行百度，UI和数据都有了，接下来我们开始编码

     json结构

3. 具体代码

   index.main.js

     import React, { Component } from 'react';
     import {
         AppRegistry, 
         StyleSheet,  
         Text,        
         View,         
         Image
     } from 'react-native';
   
     /*设置一些全局变量*/
   
     //获取设备的宽
     var dimensions = require("Dimensions");
     var width = dimensions.get("window").width;
   
     //设置每行3列
     var cols = 3;
   
     //每个小View的宽
     var boxW = 100;
   
     //计算每个View的间距
     var vMargin = (width-cols*boxW)/(cols+1);
   
     /*引入json数据
   
        A: 这里将json文件给引入了，我怎么去看变量badgeData里面的内容到底是什么呢？
   
        Q:   1. 直接console.log()
             2. andorid手机摇一摇手机，点击Debug JS Remotely,此时会在PC端自动给给打开一个网站(http://localhost:8081/debugger-ui),点开控制台即可看到你输出的内容，在这里会将json文件的内容转化成对象输出到控制台
   
     */
      var badgeDate = require("./BadgeData.json");
      console.log(badgeDate); 
   
     var MyRn = React.createClass({
   
           render() {
   
                return (
   
                     //这个View是全屏的View，具体样式看container
                     <View style={styles.container}>
   
                          /*函数renderAllBadge返回一个数组，该数组里放着每一个小View
   
                           * 提醒：
                           * 
                           *  1. 目前我们是在组件对象MyRn中的render()函数里，renderAllBadge是组件对象MyRn里面的一个函数
                           *
                           *  2. this指代的就是当前组件对象，这里跟js里面函数的用法一致
                           *
                           */
                          {this.rederAllBadge()}
                     </View>
   
                );
          },
   
         rederAllBadge(){
   
            //这个数组里存放我们准备好的每个小View,最终要作为这个函数的返回值返回
          var allData = [];
   
            //通过for循环来取出来每个小View的数据
          for(var i=0;i<badgeDate.data.length;i++){
   
             var badge = badgeDate.data[i];
   
                     //每次循环以后，将准备好的View放到数组allData中
                  allData.push(
                         //通过key来标识每一个小View
                         <View key={i} style={styles.outViewStyle}>            
                             <Image source={{uri:badge.icon}}  style={styles.imageStyle}/>
                             <Text style={styles.textStyle}>{badge.title}</Text>
                         </View>       
                  );       
               }
   
                //将allData作为返回值返回
              return allData;
   
            }
       })
   
     const styles = StyleSheet.create({
   
         container: {
   
             flex: 1,
             backgroundColor: 'white',
   
             flexDirection:"row",
             flexWrap:"wrap",
          },
   
         outViewStyle:{
   
             backgroundColor:"gray",
   
             alignItems:"center",
   
             width:boxW,
             height:boxW,
             marginLeft:vMargin,
             marginTop:vMargin
   
         },
   
         imageStyle:{
   
         width:80,
         height:80
         },
   
         textStyle:{
         fontSize:15
         }  
     });
   
     //导出自定义的组件
     module.exports = MyRn;
   
    index.android.js
   
     import {
         AppRegistry, 
   
     } from 'react-native';
   
     //导入其他文件中的组件
     var MyView =  require("./index.main.js");
   
     AppRegistry.registerComponent('myRn', () => MyView);
   

• 注意

  1. 这个案例用到的知识点都是咱们之前学习过的，通过这个案例我告知大家一些编程小技巧，现在要慢慢熟悉这种，以后我们的案例都会是这种风格

  2. 大家没见过的我都加注释的，哪里有什么迷惑的，可以直接评论留言。