開篇
盡管在移動(dòng)開發(fā)中,原生APP的開發(fā)成本很高,但現(xiàn)階段基于原生開發(fā)仍然是必須的,因?yàn)閃eb的用戶體驗(yàn)仍無法超越Native,主要體現(xiàn)在:
(1)Native的原生控件有更好的體驗(yàn)
(2)Native有更好的手勢識別
(3)Native有更合適的線程模型,盡管Web Worker可以解決一部分問題,但如圖像解碼,文本渲染仍無法多線程渲染,這影響了Web的流暢性。
React Native于F8大會(huì)開源,在短短不到一年的時(shí)間里,它成為手機(jī)端必不可少的開發(fā)模式之一.它充分利用了Facebook現(xiàn)有的業(yè)務(wù)輪子,其核心設(shè)計(jì)理念:既擁有Native的用戶體驗(yàn),又保留React的開發(fā)效率.
目前,React Native基本完成了對多端的支持,實(shí)現(xiàn)了真正意義上的面向配置開發(fā):開發(fā)者可以靈活的使用HTML和CSS布局,使用React語法構(gòu)建組件,實(shí)現(xiàn):H5,Android,iOS多端代碼的復(fù)用。
此外,使用流暢度和原生的保持在同一層次,這不是我們夢寐以求的開發(fā)模式嗎?讓我們從無到有開啟新的學(xué)習(xí)篇章吧!
什么是React Native?
(一) 時(shí)下兩大移動(dòng)互聯(lián)網(wǎng)主流技術(shù)
BAT等一線互聯(lián)網(wǎng)公司的插件化,熱修改等技術(shù)
React Native技術(shù)(2016年,隨著Android版本的穩(wěn)定,更加火爆)
(二)React Native介紹
Facebook于2015年9月15日發(fā)布React Native
廣大開發(fā)者可以使用JavaScript和React開發(fā)跨平臺移動(dòng)應(yīng)用
React Native提倡組件化開發(fā):即提供一個(gè)個(gè)封裝好的組件,組件相互嵌套,形成新的組件
(三) React Native的優(yōu)勢
3.1 跨平臺開發(fā)
運(yùn)用React Native,我們可以使用同一份業(yè)務(wù)邏輯核心代碼來創(chuàng)建原生應(yīng)用運(yùn)行在Web端,Android端和iOS端;
React Native的優(yōu)秀之處在于其吸取了各家跨平臺解決方案的優(yōu)點(diǎn)然后融于一體。
(1)通過JavaScript驅(qū)動(dòng)原生代碼，實(shí)現(xiàn)非常接近原生應(yīng)用的體驗(yàn)；
(2)統(tǒng)一的開發(fā)語言和框架打破不同平臺語言和機(jī)制不通用必須分別開發(fā)的障礙；
(3)更具革命性的是React Native基于React的設(shè)計(jì)思想，通過虛擬DOM、單向數(shù)據(jù)流，為我們帶來了更加簡單高效的開發(fā)體驗(yàn)。
3.2 追求極致的用戶體驗(yàn):實(shí)時(shí)熱部署
3.3Learn once, write anywhere(最具魅力)
React Native不強(qiáng)求一份原生代碼支持多個(gè)平臺,所以不提"write once,run anywhere”(Java),提出了”Learn once, write anywhere“.
只需要學(xué)習(xí)React Native，我們就能夠編寫針對不同平臺的應(yīng)用，并且使用React Native框架開發(fā)相較于原生代碼開發(fā)應(yīng)用，更簡單更高效。
通過React Native框架我們能夠?qū)崿F(xiàn)應(yīng)用任意模塊的更新，而不需要用戶通過各種渠道下載安裝包重新安裝。修復(fù)線上bug也會(huì)變的非常及時(shí)。并且對應(yīng)用的更新可以在靜默的狀態(tài)下完成，省去讓用戶等待的時(shí)間。
(四) React Native開發(fā)注意事項(xiàng)
4.1 目前React Native在iOS上僅支持ios7以上,Android僅支持Android4.1以上版本;
github地址:https://github.com/facebook/react-native
官方文檔:http://facebook.github.io/react-native/docs/getting-started.html
4.2 由于React Native的版本更新速度很快,如果沒有深厚的JavaScript基礎(chǔ),建議選擇:
a. 功能適中,交互一般,不需要特別多的系統(tǒng)原生支持;
b. 對于部分復(fù)雜的應(yīng)用,可以考慮原生+React Native混合開發(fā)
如果說ReactNative有什么劣勢的話，首先就是學(xué)習(xí)成本比較高。
學(xué)習(xí)成本不僅僅包括需要學(xué)習(xí)React Native框架的使用，還包括對于不同平臺原生應(yīng)用開發(fā)能力的掌握。
由于目前的React Native框架還無法完全脫離原生代碼獨(dú)立完成大型應(yīng)用的開發(fā)，所以要求開發(fā)人員即熟悉React Native框架的運(yùn)用又有原生應(yīng)用開發(fā)的經(jīng)驗(yàn)。
React Native目前存在的問題：雖然Facebook官方宣傳React Native具有原生應(yīng)用相差無幾的用戶體驗(yàn)。但是實(shí)際開發(fā)中發(fā)現(xiàn)在一些對性能要求較高的情況下，React Native構(gòu)建的UI在滑動(dòng)過程中有明顯的卡頓，遠(yuǎn)遠(yuǎn)不能達(dá)到60FPS的要求。
其次React Native框架目前仍然存在一些性能問題，比如ListView內(nèi)存泄露的問題。而且React Native框架開發(fā)的應(yīng)用通常要比原生應(yīng)用占用更多的內(nèi)存和CPU，這也意味著通過React Native構(gòu)建的應(yīng)用更耗電。
最后React Native作為一個(gè)剛剛開源的框架，雖然在github的熱度很高，但是可用的UI組件不夠豐富。第三方組件良莠不齊，很多組件都存在不同平臺無法適配的問題。這也直接導(dǎo)致，盡管React Native是一個(gè)能夠用于跨平臺開發(fā)的框架，但是為保證一致的用戶體驗(yàn)在一些情況下不得不針對不同平臺編寫不同的代碼。
一. 環(huán)境需求
1.1安裝Homebrew
Homebrew是Mac OSX的包管理器，我們需要通過Homebrew安裝開發(fā)React Native的相關(guān)軟件包。
安裝方式:
ruby -e"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
注意這里會(huì)出現(xiàn)一個(gè)問題:
會(huì)出現(xiàn)一個(gè)這樣的語句Press RETURN to continue or any other key to abort
點(diǎn)擊enter繼續(xù)就好
命令行執(zhí)行brew -v進(jìn)行檢查brew是否已經(jīng)安裝成功
1.2 安裝npm 和 Node.js
Node.js最好安裝4.0及其以上更高版本,node安裝成功后,npm自動(dòng)也就有了,直接下載安裝Node.js, 網(wǎng)址:https://nodejs.org/en/download/
或者
brew install node
此方式需要將Xcode更新到8.0
1.3 安裝WatchMan
watchman是Facebook用于監(jiān)視JavaScript文件改動(dòng)的開源項(xiàng)目,該插件用于監(jiān)控bug變化和文件變化,并且可以觸發(fā)指定的操作
安裝方式:
brew install watchman
驗(yàn)證是否安裝成功
1.4 安裝flow
flow是Facebook開源的一個(gè)JavaScript靜態(tài)類型檢查器，建議安裝它,以方便找出JavaScript程序中可能存在的類型錯(cuò)誤
安裝方式:
brew install flow
驗(yàn)證是否安裝成功
(注意:如果提示command not found,請加上sudo獲得最高權(quán)限)
二. React Native的安裝
2.1安裝react-native-cli。react-native-cli是React Native的命令行工具，安裝react-native-cli后我們就能夠通過react-native相關(guān)命令管理ReactNative工程。
安裝方式:
npm install -g react-native-cli
驗(yàn)證是否安裝成功
如果出現(xiàn)這種錯(cuò)誤
加上 則加上 sudo, sudo npm install -g react-native-cli
三. iOS開發(fā)環(huán)境需求
Xcode7及其以上更高版本,如果你的電腦沒有安裝Xcode，請到AppStore下載最新版本。切記不要從任何第三方渠道下載！
注意
npm，是Node.js的模塊依賴管理工具。React Native源代碼以及開發(fā)React Native應(yīng)用用到的第三方組件都可以通過npm進(jìn)行下載安裝。
四. Android開發(fā)環(huán)境需求
安裝最新版的JDK:
下載安裝地址:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
安裝Android studio:
下載安裝地址:
https://sites.google.com/a/android.com/tools/recent
先安裝Android studio,然后打開終端, 輸入vim ~/.bashrc,按enter后,
輸入exportANDROID_HOME=~/Library/Android/sdk,然后按esc后,輸入:wq,退出vim編輯器.
這種方式,可以省略以下4.1-4.3步驟,只需要從4.4開始執(zhí)行即可,所以建議安裝Android studio
4.1 安裝Android SDK
安裝方式:
brew install android-sdk
4.2 定義ANDROID_HOME環(huán)境變量
確保ANDROID_HOME環(huán)境變量指向你已經(jīng)安裝的Android SDK目錄:
前往電腦的/.bashrc,/.bash_profile或者你終端所用的其它配置文件中增加以下內(nèi)容:
4.3 設(shè)置SDK
打開Android SDK Manager(Mac用戶在終端下輸入android)
選中以下項(xiàng)目:
Android SDK Build-tools version 23.0.1 (這個(gè)版本必須嚴(yán)格匹配23.0.1)
Android 6.0 (API 23)
Local Maven repository for Support Libraries (之前叫做AndroidSupportRepository)
點(diǎn)擊”Install Packages”:
4.4 安裝Genymotion
Genymotion是一個(gè)第三方模擬器,它比Google官方的模擬器更易設(shè)置且性能更好.但是它只針對個(gè)人用戶免費(fèi).
(1) 下載并安裝Genymotion
(2) 打開Genymotion,如果你尚未安裝VirtualBox,它有可能會(huì)提示你安裝
VirtualBox下載安裝地址:
(3) 打開Genymotion,創(chuàng)建一個(gè)模擬器并啟動(dòng)(需要在Genymotion的官網(wǎng)注冊一個(gè)賬號才可以打開)
(4) 按下command+M可以打開開發(fā)者菜單(在安裝并啟動(dòng)了React Native應(yīng)用之后)
五. React Native的第一個(gè)應(yīng)用
5.1 執(zhí)行命令,生成一個(gè)工程
react-native init 項(xiàng)目名稱
選擇一個(gè)目錄位置，執(zhí)行上述命令，終端出現(xiàn)如下信息說明工程已經(jīng)創(chuàng)建完畢。
注意:
因?yàn)橐獜膎pm下載React Native的源代碼，可能需要等待一會(huì)。如果長時(shí)間沒有反應(yīng)，建議翻墻。也可以將npm替換為國內(nèi)鏡像：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
5.2 AseeMyGoProduct就是我們創(chuàng)建的工程的名稱。
5.2.1 到AseeMyGoProduct工程同名的目錄下，進(jìn)入ios目錄，用Xcode打開AseeMyGoProduct工程，?+R運(yùn)行。這時(shí)可以看到終端啟動(dòng)并且輸出服務(wù)器啟動(dòng)的相關(guān)信息。
等待模擬器啟動(dòng)，可以看到一個(gè)Welcome to React Native界面，說明我們已經(jīng)成功創(chuàng)建第一個(gè)ReactNative工程。
5.2.2 到AseeMyGoProduct工程同名的目錄下，進(jìn)入android目錄，用Android studio打開android目錄,等待時(shí)間會(huì)很長。
5.3 目錄結(jié)構(gòu)截圖
目錄結(jié)構(gòu)分析:
(a) 默認(rèn)生成android和ios兩個(gè)平臺的原生項(xiàng)目
(b) 其中,index.android.js和index.ios.js文件為Android和iOS的空殼應(yīng)用文件
(c) 此外,node_modules文件夾,是為Node.js存放和管理npm包資源,也包含React Native框架文件
查看index.ios.js中的代碼
六. 運(yùn)行工程文件
不管是 iOS 還是 Android,在開發(fā)調(diào)試階段,都需要在 Mac上 啟動(dòng)一個(gè) HTTP 服務(wù),稱為Debug Server,默認(rèn)運(yùn)行在8081端口, APP 通過Debug Server加載 js
6.1 打開Xcode,運(yùn)行你的第一個(gè)React Native創(chuàng)建的iOS應(yīng)用
6.2 把React Native創(chuàng)建的應(yīng)用跑在Android上
(a) 命令行執(zhí)行cd AseeMyGoProduct,路徑切換到項(xiàng)目主目錄
(b)命令行執(zhí)行react-native run-android,加載運(yùn)行android應(yīng)用
(c) 使用編輯器打開和修改index.android.js文件,接著通過菜單按鈕選擇Reload JS進(jìn)行刷新修改
七. 管理React Native庫的版本
在開發(fā)中,會(huì)經(jīng)常的去控制React Native的版本庫,得以適配各種條件下的開發(fā),那該如何查看,控制React Native的版本呢?
7.1 查看本地的React Native庫的版本
命令行輸入react-native --version
命令行效果
7.2 更新本地的React Native的版本
命令行輸入 npm update -g react-native-cli
7.3 查看react-native的npm包最新版本
NPM的全稱是Node Package Manager, 是一個(gè)NodeJS包管理和分發(fā)工具,已經(jīng)成為了非官方的發(fā)布Node模塊(包)的標(biāo)準(zhǔn)
npm包地址:https://www.npmjs.com/package/react-native
命令行查詢 npm info react-native
查詢效果
在項(xiàng)目中查看
7.4 升級或者降級npm包的版本
升級到當(dāng)前最新 npm install --save react-native@0.36
降級到以前版本 npm install --save react-native@0.18
7.5 更新項(xiàng)目templates文件(可選)
新的npm包會(huì)包含更新在運(yùn)行react-native init命令生成的一些動(dòng)態(tài)文件,例如init創(chuàng)建項(xiàng)目的時(shí)候會(huì)生成iOS和Android的子項(xiàng)目,我們可以通過以下的命令進(jìn)行獲取最新的代碼
命令行查詢r(jià)eact-native upgrade
八. WebStorm設(shè)置React Native代碼提示
8.1 從github上下載xml插件
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
8.2 安裝
將ReactNative.xml復(fù)制到 ~/Library/Preferences/WebStorm2016.1/templates,然后重啟WebStorm.
