前言
之前有人问我学习一门技术，怎么样才能最快速的掌握一门技术，我的回答是写博客或者给别人讲解。
这两种方式有一个共性，那就是都需要专研。我们自己去学习的时候，容易有一种得过且过的心理，比如：“算了，不研究了，我知道怎么写就行”。但当你写博客或者讲解的时候，就不能有这样的心态了，你得专研他到底是什么原理，这样你在写博客或者给别人讲解的过程中，你才会更加自信。同时你自己也再一步一步的提升。
废话不多说了，本篇内容如下：
- 组件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的编程方式熟烂于心，再进行下一步的学习，开始之前先看一下我们要做的效果
-
准备工作
将source文件夹中的BadgeData.json文件放到跟index.android.js同级的目录里
将source中的图片放到android的drawable文件夹和iOS的asset文件夹, 点击创建drawable文件夹,iOS的自行百度
在index.android.js的同级目录下新建一个js文件，统一取名为index.main.js
-
编码思路
-
看图我们可以大概得出这个项目的UI结构如下
最底下的白色背景是一个全屏的View,每个灰色的色块是一个小View,小View里面又包含了一个Image和Text.
-
界面出来以后，我们在大概的看一下json数据结构，不懂json自行百度，UI和数据都有了，接下来我们开始编码
json结构
-
-
具体代码
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);
-
注意
这个案例用到的知识点都是咱们之前学习过的，通过这个案例我告知大家一些编程小技巧，现在要慢慢熟悉这种，以后我们的案例都会是这种风格
大家没见过的我都加注释的，哪里有什么迷惑的，可以直接评论留言。
