React Native——個人學習套路

學習東西都有必定的套路，特別是新的框架，對於React Native，我是這麼學的。

第一步 ： 這是啥

在各類緣由下，須要使用某個框架時，那第一件事就是知道這個框架是用來幹什麼。React Native，就是用來作移動端的跨平臺應用（iOS和Android），使用JavaScript來開發。聽說性能很是接近原生，這是我最感興趣的地方。

目前關於Hybrid App的框架，有大概兩種分類：

1. 組件以Web實現爲主，附加原生功能調用接口

優勢：組件可在普通瀏覽器，微信等頁面使用。

缺點：在某些低端機器頁面卡頓，或者不平滑，效果不及原生不少。

2. 組件以原生實現爲主，附加原生功能調用接口

優勢：操做起來會更加流暢，效果很接近原生。

缺點：只能在固定容器下使用（但某些狀況下這個不算是缺點）。

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

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

第二步 ： 環境搞起

第二步，該把開發環境搭起來。在裝React Native開發環境時，該裝NodeJS裝NodeJS，該裝Python的裝Python，注意安裝的版本。每一個框架都確定會有這些新手指引，照着來一步步就好了，這裏注意一點，安裝軟件錯了不要怕，仔細查看報錯的日誌，而後在網上查查，你遇到的問題別人也確定遇到過（99%是這樣的）。

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

PS：我裝的是在Window上開發Android的環境。

第三步 ： HelloWorld

有個笑話：某程序員辭職以後準備練習書法，他買來了全套最好的書法用具，在紙上寫下了幾個字：Hello World。

能夠說，HelloWorld是一切語言或框架學習的起始，它是經典中的經典。

因而，很重要的一步開始了，React Native的HelloWorld ：

1. 初始化工程

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

從命令上看，看起來是初始化一個工程，因而，

1分鐘......

10分鐘......

1小時......

2小時......

納尼，什麼鬼，接近3個小時都沒有初始化好，真是X了狗了。

2. 換npm源

聽說是react-native命令行從npm官方源拖代碼會由於「和諧」的緣由，會拉不了，因而有人建議使用國內的：

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命令，確保設備已連上了。

4. 運行程序

cd進AwesomeProject目錄，執行react-native run-android。

這是就會看到在咻咻咻的編譯，在97%時候，會讓你在手機點擊確認安裝，點擊肯定就行。

100%會自動啓動index.android.js的初始頁面，進去以後，納尼，是空白的，什麼鬼！！！！

PS：這時程序已經安裝好了，能夠拔掉無情了。

5. 打開相應應用權限

因而聽說小米的機器默認限制顯示懸浮窗，能夠到應用->權限管理->顯示懸浮窗打開，這樣能夠查看錯誤日誌。

PS：其餘機器可能也須要。

因而設置好後，重啓應用，哈哈哈哈，果真有紅色的懸浮窗錯誤提示，錯誤提示：「Unable to connect with remote debugger」，講道理這個錯誤不大懂，不過有變化老是好的。

PS：在後來我完整查看整個React Native時候，在Android」在設備上運行「有寫明，但當時就是愣頭青，瞎調。

6. 設置遠程ip、port

在點擊菜單欄按鈕時候，發現了一個Dev Settings菜單，因而進去查看後發現，裏面有能夠設置ip和端口的。

聯繫第四步出現的一個啓動遠程頁面的窗口，猜測是否是須要設置 電腦ip和那個服務端口。 因而設置ip和port，reload一下頁面，果真看到了React Native的HelloWorld。

PS：我真是個天才。

第四步 ： 瞭解開發套路

這一步須要仔細查看框架的目錄結構，瞭解裏面每一個目錄有什麼，有什麼用，咱們可以改什麼東西。

在簡單查看裏面文件後，我就去了解框架的核心組件或核心模塊，這些通常文檔都有說明，瞭解寫法和效果。每個核心組件，我都使用了一下，嘗試了一下。

第五步 ： 一個簡單完整的Demo

最後直接作一個完整示例。

在學React Native時候，我沒耐心一個個組件去嘗試，我只試過核心的幾個組件。不少人會當心的把文檔和每一個組件細細讀一遍，試一遍，甚至尋找應用示例（完整的應用）本身跑起來，學習示例的開發套路。誠然這種方式很全面，也挺好，可是週期太長了，並且印象不深。

我貫徹的是用到再學。在搭完環境，看完簡單示例後，就直接作一個完整的應用示例（包含組件的使用、佈局寫法、頁面跳轉等東西），一個新聞類的應用。

一開始，撞得頭破血流，不少東西不明白爲何，也不知道怎麼用，遇到了不少問題（後面我會寫一篇文章總結常遇到的問題）。很痛苦，可是我以爲這樣的體驗是最深的，看別人寫十行，不如本身打一行。

PS：這個新聞應用示例我寫了三天，我將在另外一篇文章說明。

 

總結：

由於機器的緣由，我沒辦法編譯iOS，因此上面的所說的都是在Android上的體驗。但學習套路應該是相通，這也是我學習React Native的方式。

 

本文爲原創文章，轉載請保留原出處，方便溯源，若有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5675751.html