abstract：學(xué)習(xí)東西都有一定的套路，特別是新的框架，對于React Native，我是這么學(xué)的。第一步 ： 這是啥在各種原因下，需要使用某個框架時，那第一件事就是知道這個框架是用來干什么。React Native，就是用來做移動端的跨平臺應(yīng)用（iOS和Android），使用JavaScript來開發(fā)。據(jù)說性能非常接近原生，這是我最感興趣的地方。目前關(guān)于Hybrid App的框架，有大概兩種分類：1. 組件以W
學(xué)習(xí)東西都有一定的套路，特別是新的框架，對于React Native，我是這么學(xué)的。
第一步 ： 這是啥
在各種原因下，需要使用某個框架時，那第一件事就是知道這個框架是用來干什么。React Native，就是用來做移動端的跨平臺應(yīng)用（iOS和Android），使用JavaScript來開發(fā)。據(jù)說性能非常接近原生，這是我最感興趣的地方。
目前關(guān)于Hybrid App的框架，有大概兩種分類：
1. 組件以Web實現(xiàn)為主，附加原生功能調(diào)用接口
優(yōu)點：組件可在普通瀏覽器，微信等頁面使用。
缺點：在某些低端機器頁面卡頓，或者不平滑，效果不及原生很多。
2. 組件以原生實現(xiàn)為主，附加原生功能調(diào)用接口
優(yōu)點：操作起來會更加流暢，效果很接近原生。
缺點：只能在固定容器下使用（但某些情況下這個不算是缺點）。
在我看來，React Native應(yīng)該是第二種，雖然Hybrid App的定義是Web頁面和原生殼的組合，但React Native的js文件也算是Web吧。另外，React Native印證了我之前的一句話——要做得像原生，有原生的效果，那就得用原生去做。
PS：知道框架用來干嘛的第一步就完成了。
第二步 ： 環(huán)境搞起
第二步，該把開發(fā)環(huán)境搭起來。在裝React Native開發(fā)環(huán)境時，該裝NodeJS裝NodeJS，該裝Python的裝Python，注意安裝的版本。每個框架都肯定會有這些新手指引，照著來一步步就行了，這里注意一點，安裝軟件錯了不要怕，仔細(xì)查看報錯的日志，然后在網(wǎng)上查查，你遇到的問題別人也肯定遇到過（99%是這樣的）。
React Native需要裝的東西挺多的，不過我按著文檔很順利的就安裝完了。
PS：我裝的是在Window上開發(fā)Android的環(huán)境。
第三步 ： HelloWorld
有個笑話：某程序員辭職之后準(zhǔn)備練習(xí)書法，他買來了全套最好的書法用具，在紙上寫下了幾個字：Hello World。
可以說，HelloWorld是一切語言或框架學(xué)習(xí)的起始，它是經(jīng)典中的經(jīng)典。
于是，很重要的一步開始了，React Native的HelloWorld ：
1. 初始化工程
在DOS輸入命令 ：react-native init AwesomeProject
從命令上看，看起來是初始化一個工程，于是，
1分鐘......
10分鐘......
1小時......
2小時......
納尼，什么鬼，接近3個小時都沒有初始化好，真是X了狗了。
2. 換npm源
據(jù)說是react-native命令行從npm官方源拖代碼會因為“和諧”的原因，會拉不了，于是有人建議使用國內(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. 插上真機
我懶得裝模擬器，于是我用的是真機。
插上我的Android手機（小米 紅米2A），輸入adb devices命令，確保設(shè)備已連上了。
4. 運行程序
cd進AwesomeProject目錄，執(zhí)行react-native run-android。
這是就會看到在咻咻咻的編譯，在97%時候，會讓你在手機點擊確認(rèn)安裝，點擊確定就行。
100%會自動啟動index.android.js的初始頁面，進去之后，納尼，是空白的，什么鬼?。。?！
PS：這時程序已經(jīng)安裝好了，可以拔掉無情了。
5. 打開相應(yīng)應(yīng)用權(quán)限
于是據(jù)說小米的機器默認(rèn)限制顯示懸浮窗，可以到應(yīng)用->權(quán)限管理->顯示懸浮窗打開，這樣可以查看錯誤日志。
PS：其他機器可能也需要。
于是設(shè)置好后，重啟應(yīng)用，哈哈哈哈，果然有紅色的懸浮窗錯誤提示，錯誤提示：“Unable to connect with remote debugger”，講道理這個錯誤不大懂，不過有變化總是好的。
PS：在后來我完整查看整個React Native時候，在Android”在設(shè)備上運行“有寫明，但當(dāng)時就是愣頭青，瞎調(diào)。
6. 設(shè)置遠(yuǎn)程ip、port
在點擊菜單欄按鈕時候，發(fā)現(xiàn)了一個Dev Settings菜單，于是進去查看后發(fā)現(xiàn)，里面有可以設(shè)置ip和端口的。
聯(lián)系第四步出現(xiàn)的一個啟動遠(yuǎn)程頁面的窗口，猜想是不是需要設(shè)置 電腦ip和那個服務(wù)端口。 于是設(shè)置ip和port，reload一下頁面，果然看到了React Native的HelloWorld。
PS：我真是個天才。
第四步 ： 了解開發(fā)套路
這一步需要仔細(xì)查看框架的目錄結(jié)構(gòu)，了解里面每個目錄有什么，有什么用，我們能夠改什么東西。
在簡單查看里面文件后，我就去了解框架的核心組件或核心模塊，這些一般文檔都有說明，了解寫法和效果。每一個核心組件，我都使用了一下，嘗試了一下。
第五步 ： 一個簡單完整的Demo
最后直接做一個完整示例。
在學(xué)React Native時候，我沒耐心一個個組件去嘗試，我只試過核心的幾個組件。很多人會小心的把文檔和每個組件細(xì)細(xì)讀一遍，試一遍，甚至尋找應(yīng)用示例（完整的應(yīng)用）自己跑起來，學(xué)習(xí)示例的開發(fā)套路。誠然這種方式很全面，也挺好，但是周期太長了，而且印象不深。
我貫徹的是用到再學(xué)。在搭完環(huán)境，看完簡單示例后，就直接做一個完整的應(yīng)用示例（包含組件的使用、布局寫法、頁面跳轉(zhuǎn)等東西），一個新聞類的應(yīng)用。
一開始，撞得頭破血流，很多東西不明白為什么，也不知道怎么用，遇到了很多問題（后面我會寫一篇文章總結(jié)常遇到的問題）。很痛苦，但是我覺得這樣的體驗是最深的，看別人寫十行，不如自己打一行。
PS：這個新聞應(yīng)用示例我寫了三天，我將在另一篇文章說明。
總結(jié)：
因為機器的原因，我沒辦法編譯iOS，所以上面的所說的都是在Android上的體驗。但學(xué)習(xí)套路應(yīng)該是相通，這也是我學(xué)習(xí)React Native的方式。