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

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

第一步 ： 這是啥

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

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

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

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

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

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

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

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

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

PS：知道框架用來干嘛的第一步就完成了。

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

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

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

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

第三步 ： HelloWorld

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

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

于是，很重要的一步開始了，React Native的HelloWorld ：

1. 初始化工程

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

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

1分鐘......

10分鐘......

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

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

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

2. 換npm源

據(jù)說是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的初始頁面，進(jìn)去之后，納尼，是空白的，什么鬼?。。?！

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

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

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

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

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

PS：在后來我完整查看整個(gè)React Native時(shí)候，在Android”在設(shè)備上運(yùn)行“有寫明，但當(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)程頁面的窗口，猜想是不是需要設(shè)置 電腦ip和那個(gè)服務(wù)端口。 于是設(shè)置ip和port，reload一下頁面，果然看到了React Native的HelloWorld。

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

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

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

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

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

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

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

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

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

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

總結(jié)：

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