從 Android 到 React Native 開發（一、入門）

戀貓de小郭發表於1970-01-01

大家好┏ (^ω^)=，許久不見，一不小心斷更就成為了一種習慣，因為最近掉React Native的坑裡，無法自拔啊～(╯‵□′)╯︵┻━┻。
關於React Native是什麼，各位可谷歌之，這裡主要給大家安利下React Native，總結下一些從Android到React Native相關的概念和基礎。來吧，互相傷害啊(˶‾᷄ ⁻̫ ‾᷅˵)。

本文並非講解入門基礎，更多是給Android原生開發學習和理解React Native，前半部分主要是閒談和安利，後半部分是相關的入門，請緊張的往下看Σ（・□・；）

注：喜歡乾貨的可以直接跳到後面的：帶著Android開發來理解React Native

從 Android 到 React Native 開發（一、入門） — 請收起你不屑的眼神

為什麼要學React Native？

因為現在許多主流的應用都有React Native的影子，它對比原生開發更為靈活，對比H5體驗更為高效，而且跨平臺的支援特性。
相對ionic這類PhoneGap，它效率更高，和原生之間的互動更方便。
多個版本迭代後的今天，它已經擁有了豐富第三方外掛支援。
React Native解決不了的，可以通過各位熟悉的原生來解決。
更方便的熱更新。

當然，React Native的坑也不在少數：

儘管是跨平臺，但是不同平臺Api的特性與顯示並不一定一致。
相對增大了app的體積。
除錯’相對‘麻煩。
Android上的相容性問題。

總的來說，React Native適合作為專案中的補充，而不是作為核心去開發APP。

因為儘管是跨平臺和快捷開發，但是以React Native為核心，去開發稍微偏中型以上的專案，後期維護的人員絕對不比原生的少多少，而且專案大了，體驗依舊是個大問題。

相反，把React Native作為專案開發中的補充，可以在一定程度上實現平臺業務的統一，還有靈活的開發效率，補充原生的不足。

如何入門？

作為原生開發，因為React Native的特殊性，在入門的時候會比前端開發更慢一些，除非你會基礎的javascript，ES6語法，React相關基礎知識，不然這一層面確實相對會缺乏優勢。

原生開發在React Native的優勢是後期，React Native隨著業務的增加，單純的React Native時時無法滿足需求，那時候熟悉原生、又掌握了React Native的你，一定能給出更好的解決方案。

所以不要放棄（我會告訴你中途我都放棄好幾次了嘛？），萬事開頭難，何況你已經被Android坑了這麼久，怕(￣◇￣;)什麼？剛開始想到要學習js和es6，確實會有些怠惰，但這步踩下去，你將會開啟新世界的大門，哲學大門就在前方(˶‾᷄ ⁻̫ ‾᷅˵)。

那麼入門前你需要知道：

javascript基礎（不懂？不怕，學習React的時候一起熟悉）
ES6語法（不懂？不怕，學習React的時候一起熟悉）
React 還是必須學習一下，可以不必太深入，但是至少了解下思路也好。

React 的核心思想是：封裝元件。React Native就是按照一個個元件組成App，可以認為，基礎的React Native，就是一個Activity，裡面放著許多的元件，跳轉不同的元件，實現不同的頁面。

React的學習可以通過這個瞭解: 點我去看視訊。
React相關的資料：點我資料。

上面的資料足夠你瞭解React，瞭解了React，你才能更好的學習React Native，如果對於javascript和ES6還不瞭解的，通過上述React學習可以同步瞭解。
打了那麼多雞血，那麼趕緊，讓我們先走下面，用Android的基礎，來了解React Native的‘哲學‘吧。

帶著Android開發來理解React Native

1、開發環境

Android開發轉過來的，推薦Webstrom，因為它和Android Studio同出一家，快捷鍵、外掛、git版本管理等等基本不需要二次學習，無需多慮了。至於開發環境配置，跟著下方連結妥妥的。

Webstrom 簡單配置

React Native 開發環境配置

2、專案理解

React Native建立工程，是通過在命令終端輸入 react-native init 你的專案名字 來建立工程的，建立的工程會從網路端，同步到你終端所在路徑的本地，生成一個和android project類似的專案，如下圖。

其中關鍵的檔案有：

android資料夾，就是一個可以用android studio開啟的android專案。
ios資料夾，是一個可以用xcode開啟的ios專案。
index.android.js，這是android的React Native入口檔案。
index.ios.js，這是ios的React Native入口檔案。
package.json，類似android studio的build.gradle，你依賴的庫都寫在裡面。
node_module資料夾，你依賴的庫下載下來都存放在裡面，屬於git的忽略檔案，你要找的依賴庫原始碼也在裡面，包括React和React Native。
jscode資料夾，是自己建立的資料夾，用來存放自己寫的js檔案。

這裡需要理解的是：

package.json，類似於android studio中的build.gradle新增遠端依賴，不同的是，package.json大多數時候不需要我們手動新增，我們只需要在根目錄通過命令列，npm install xxxxxx --save 就可以依賴一個庫了。

install之後，庫的依賴資訊，自動被寫到package.json裡面，對應的庫也會被下載到node_module資料夾中，類似android studio依賴後把aar同步到本地。

node_module是一個忽略檔案，提交的時候不需要提交到git上，類似android studio遠端依賴下來的aar，也不會提交到git上。其他人在使用React Native專案時，只需要npm install，工程就會根據package.json，去同步下載各個依賴庫到node_module。

注：有時候還需要執行react-native link 或 react-native link xxx，這是因為有些第三方庫是通過原生程式碼加React Native實現的，通過這個命令，可以自動把相關的配置程式碼，自動新增到android和ios工程中。

3、Android開發需要理解的React Native

1）React Native 其實是執行在ReactActivity上

一般情況下只在一個activity上執行，一般情況下是因為，你也可以自己寫新的Activity，繼承ReactActivity來實現你想要的邏輯。

2）Application預設建立工程時，就會繼承ReactApplication

其中getPackage()就是返回需要與原生互動的包，MainReactPackage時初始化生成，其他是你react-native link命令時幫你插入的。當然，你也可以自己寫與原生互動的模組。

3）路由（頁面跳轉）

React Native預設是執行在一個Activity上，那麼頁面之間的跳轉自然不是Activity之間的跳轉，而是通過 Navigator來實現跳轉的。

是的，Navigator是用來做跳轉的，通過場景（Scene）來指定跳轉物件。這裡Scene類似Intent的作用，告訴Navigator我要去哪裡，Navigator負責場景推入和退出。（推薦使用react-native-router-flux框架實現）。

4）state，狀態

更新介面，修改顯示，載入資料，使用者互動，都是靠它，它是整個React Native的核心之一，React Native元件的state變化了，那麼它就會重新渲染，所以維護state，通過資料或者動作更新state等，是React Native的重點，也是和原生很大差異的地方。

所以你就看到redux這個東西，也許第一次接觸你會覺得它很難理解，但是你只需要知道，它的核心就是讓你更好的維護React的state，統一管理和處理state，所以後期redux-thunk會成為你React Native的管理利器。當然，如果元件或專案不復雜，完全不必要接觸它。

“元件的state改變了，所以介面變化了。”

5）編譯除錯

編譯其實很簡單，android其實就是在專案的根目錄終端輸入react-native run-android就可以編譯安裝，IOS本人習慣是，通過點選ios檔案目錄下的xcodeproj檔案，開啟xcode直接點選執行。

當前，剛剛接觸React Native，執行不起來是時有的事情，百度谷歌一個一個解決就好了，大部分時候都是忘記npm install，react-native link，ip不對，node服務沒有重新啟動等等，相信我，React Native會讓從此討厭上紅色！

React Native的除錯是靠chrome瀏覽器來除錯的，沒錯，瀏覽器，這樣很前端吧～哈哈哈(◐‿◑)。通過搖晃手機（模擬器使用快捷鍵 android Command⌘ + M / ios Command⌘ + D）在React Native 應用彈出下方頁面。Debug JS Remotely就是開啟除錯。