前言
之前有人問我學習一門技術，怎么樣才能最快速的掌握一門技術，我的回答是寫博客或者給別人講解。
這兩種方式有一個共性，那就是都需要專研。我們自己去學習的時候，容易有一種得過且過的心理，比如：“算了，不研究了，我知道怎么寫就行”。但當你寫博客或者講解的時候，就不能有這樣的心態了，你得專研他到底是什么原理，這樣你在寫博客或者給別人講解的過程中，你才會更加自信。同時你自己也再一步一步的提升。
廢話不多說了，本篇內容如下：
- 組件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);
-
注意
這個案例用到的知識點都是咱們之前學習過的，通過這個案例我告知大家一些編程小技巧，現在要慢慢熟悉這種，以后我們的案例都會是這種風格
大家沒見過的我都加注釋的，哪里有什么迷惑的，可以直接評論留言。
