摘要：學(xué)習(xí)東西都有一定的套路，特別是新的框架，對(duì)于React Native，我是這么學(xué)的。第一步 ： 這是啥在各種原因下，需要使用某個(gè)框架時(shí)，那第一件事就是知道這個(gè)框架是用來(lái)干什么。React Native，就是用來(lái)做移動(dòng)端的跨平臺(tái)應(yīng)用（iOS和Android），使用JavaScript來(lái)開(kāi)發(fā)。據(jù)說(shuō)性能非常接近原生，這是我最感興趣的地方。目前關(guān)于Hybrid App的框架，有大概兩種分類：1. 組件以W

學(xué)習(xí)東西都有一定的套路，特別是新的框架，對(duì)于React Native，我是這么學(xué)的。

第一步 ： 這是啥

在各種原因下，需要使用某個(gè)框架時(shí)，那第一件事就是知道這個(gè)框架是用來(lái)干什么。React Native，就是用來(lái)做移動(dòng)端的跨平臺(tái)應(yīng)用（iOS和Android），使用JavaScript來(lái)開(kāi)發(fā)。據(jù)說(shuō)性能非常接近原生，這是我最感興趣的地方。

目前關(guān)于Hybrid App的框架，有大概兩種分類：

1. 組件以Web實(shí)現(xiàn)為主，附加原生功能調(diào)用接口

優(yōu)點(diǎn)：組件可在普通瀏覽器，微信等頁(yè)面使用。

缺點(diǎn)：在某些低端機(jī)器頁(yè)面卡頓，或者不平滑，效果不及原生很多。

2. 組件以原生實(shí)現(xiàn)為主，附加原生功能調(diào)用接口

優(yōu)點(diǎn)：操作起來(lái)會(huì)更加流暢，效果很接近原生。

缺點(diǎn)：只能在固定容器下使用（但某些情況下這個(gè)不算是缺點(diǎn)）。

在我看來(lái)，React Native應(yīng)該是第二種，雖然Hybrid App的定義是Web頁(yè)面和原生殼的組合，但React Native的js文件也算是Web吧。另外，React Native印證了我之前的一句話——要做得像原生，有原生的效果，那就得用原生去做。

PS：知道框架用來(lái)干嘛的第一步就完成了。

第二步 ： 環(huán)境搞起

第二步，該把開(kāi)發(fā)環(huán)境搭起來(lái)。在裝React Native開(kāi)發(fā)環(huán)境時(shí)，該裝NodeJS裝NodeJS，該裝Python的裝Python，注意安裝的版本。每個(gè)框架都肯定會(huì)有這些新手指引，照著來(lái)一步步就行了，這里注意一點(diǎn)，安裝軟件錯(cuò)了不要怕，仔細(xì)查看報(bào)錯(cuò)的日志，然后在網(wǎng)上查查，你遇到的問(wèn)題別人也肯定遇到過(guò)（99%是這樣的）。

React Native需要裝的東西挺多的，不過(guò)我按著文檔很順利的就安裝完了。

PS：我裝的是在Window上開(kāi)發(fā)Android的環(huán)境。

第三步 ： HelloWorld

有個(gè)笑話：某程序員辭職之后準(zhǔn)備練習(xí)書(shū)法，他買來(lái)了全套最好的書(shū)法用具，在紙上寫(xiě)下了幾個(gè)字：Hello World。

可以說(shuō)，HelloWorld是一切語(yǔ)言或框架學(xué)習(xí)的起始，它是經(jīng)典中的經(jīng)典。

于是，很重要的一步開(kāi)始了，React Native的HelloWorld ：

1. 初始化工程

在DOS輸入命令 ：react-native init AwesomeProject

從命令上看，看起來(lái)是初始化一個(gè)工程，于是，

1分鐘......

10分鐘......

1小時(shí)......

2小時(shí)......

納尼，什么鬼，接近3個(gè)小時(shí)都沒(méi)有初始化好，真是X了狗了。

2. 換npm源

據(jù)說(shuō)是react-native命令行從npm官方源拖代碼會(huì)因?yàn)椤昂椭C”的原因，會(huì)拉不了，于是有人建議使用國(guó)內(nèi)的：

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

額，這兩句命令就不深究了，就是更換下載包的地址。

重新輸入步驟一的命令，哎喲，還真10多分鐘就初始化好了。

PS：下了好多Node Module。

3. 插上真機(jī)

我懶得裝模擬器，于是我用的是真機(jī)。

插上我的Android手機(jī)（小米 紅米2A），輸入adb devices命令，確保設(shè)備已連上了。

4. 運(yùn)行程序

cd進(jìn)AwesomeProject目錄，執(zhí)行react-native run-android。

這是就會(huì)看到在咻咻咻的編譯，在97%時(shí)候，會(huì)讓你在手機(jī)點(diǎn)擊確認(rèn)安裝，點(diǎn)擊確定就行。

100%會(huì)自動(dòng)啟動(dòng)index.android.js的初始頁(yè)面，進(jìn)去之后，納尼，是空白的，什么鬼?。。?！

PS：這時(shí)程序已經(jīng)安裝好了，可以拔掉無(wú)情了。

5. 打開(kāi)相應(yīng)應(yīng)用權(quán)限

于是據(jù)說(shuō)小米的機(jī)器默認(rèn)限制顯示懸浮窗，可以到應(yīng)用->權(quán)限管理->顯示懸浮窗打開(kāi)，這樣可以查看錯(cuò)誤日志。

PS：其他機(jī)器可能也需要。

于是設(shè)置好后，重啟應(yīng)用，哈哈哈哈，果然有紅色的懸浮窗錯(cuò)誤提示，錯(cuò)誤提示：“Unable to connect with remote debugger”，講道理這個(gè)錯(cuò)誤不大懂，不過(guò)有變化總是好的。

PS：在后來(lái)我完整查看整個(gè)React Native時(shí)候，在Android”在設(shè)備上運(yùn)行“有寫(xiě)明，但當(dāng)時(shí)就是愣頭青，瞎調(diào)。

6. 設(shè)置遠(yuǎn)程ip、port

在點(diǎn)擊菜單欄按鈕時(shí)候，發(fā)現(xiàn)了一個(gè)Dev Settings菜單，于是進(jìn)去查看后發(fā)現(xiàn)，里面有可以設(shè)置ip和端口的。

聯(lián)系第四步出現(xiàn)的一個(gè)啟動(dòng)遠(yuǎn)程頁(yè)面的窗口，猜想是不是需要設(shè)置 電腦ip和那個(gè)服務(wù)端口。 于是設(shè)置ip和port，reload一下頁(yè)面，果然看到了React Native的HelloWorld。

PS：我真是個(gè)天才。

第四步 ： 了解開(kāi)發(fā)套路

這一步需要仔細(xì)查看框架的目錄結(jié)構(gòu)，了解里面每個(gè)目錄有什么，有什么用，我們能夠改什么東西。

在簡(jiǎn)單查看里面文件后，我就去了解框架的核心組件或核心模塊，這些一般文檔都有說(shuō)明，了解寫(xiě)法和效果。每一個(gè)核心組件，我都使用了一下，嘗試了一下。

第五步 ： 一個(gè)簡(jiǎn)單完整的Demo

最后直接做一個(gè)完整示例。

在學(xué)React Native時(shí)候，我沒(méi)耐心一個(gè)個(gè)組件去嘗試，我只試過(guò)核心的幾個(gè)組件。很多人會(huì)小心的把文檔和每個(gè)組件細(xì)細(xì)讀一遍，試一遍，甚至尋找應(yīng)用示例（完整的應(yīng)用）自己跑起來(lái)，學(xué)習(xí)示例的開(kāi)發(fā)套路。誠(chéng)然這種方式很全面，也挺好，但是周期太長(zhǎng)了，而且印象不深。

我貫徹的是用到再學(xué)。在搭完環(huán)境，看完簡(jiǎn)單示例后，就直接做一個(gè)完整的應(yīng)用示例（包含組件的使用、布局寫(xiě)法、頁(yè)面跳轉(zhuǎn)等東西），一個(gè)新聞?lì)惖膽?yīng)用。

一開(kāi)始，撞得頭破血流，很多東西不明白為什么，也不知道怎么用，遇到了很多問(wèn)題（后面我會(huì)寫(xiě)一篇文章總結(jié)常遇到的問(wèn)題）。很痛苦，但是我覺(jué)得這樣的體驗(yàn)是最深的，看別人寫(xiě)十行，不如自己打一行。

PS：這個(gè)新聞應(yīng)用示例我寫(xiě)了三天，我將在另一篇文章說(shuō)明。

總結(jié)：

因?yàn)闄C(jī)器的原因，我沒(méi)辦法編譯iOS，所以上面的所說(shuō)的都是在Android上的體驗(yàn)。但學(xué)習(xí)套路應(yīng)該是相通，這也是我學(xué)習(xí)React Native的方式。