零基礎用react-native開發android app
序
這篇博客旨在幫沒有任何android或者ios開發經驗的開發者體驗一把當下熱門的react-native。由于我之前也沒有native app的開發經驗，所以這篇文章中引用了很多我學習過程中碰到的簡短有用的資料，方便大家少走些彎路。
react-native介紹
直接去 官網 看,不用掛V*N。總而言之，這貨就是用寫web的方式去寫原生應用。布局用css，代碼用react的框架。而且不是hybrid app，所以體驗很流暢。
總而言之，如果要給app分類的話：
1.webapp： 移動端的web頁面，純瀏覽器應用。
2.native-app： Java或者oc、swift開發的app，用的本地的組件以及布局。
3.hybrid-app： 介于以上兩者之間。即有原生的組件，又封裝了webview在里面以便渲染web組件。而這方面有很多框架，典型的如ionic。
而對于react-native，準確的說，應該是屬于native app，因為他的渲染完全是本地方式，不靠webview。但是寫代碼的方式又是web前端。如何做到的呢？參考 react原理 。
上手react-native
QUICK START
如果沒有接觸過RN(react-native)，強烈建議第一件事是去花幾十分鐘把 QUICK START 做一遍，遇到不懂的直接照做，不用糾結原因，全當是搭環境。
對于RN android的環境搭建步驟主要有：
-
react-native部分 ：主要是npm安裝react-native-cli工具。這個可以創建工程，運行工程，打包工程等。按照官網教程一步一步來就行了。
-
android部分 ：主要是android SDK，模擬器（推薦Genymotion，方便。）
-
運行: 主要原理是，react-native run-android這條命令會編譯并打包一個用來debug的apk，并安裝到模擬器或者手機。但是debug版本的apk并不是獨立的apk，每次運行需要從pc上加載你所寫的js代碼，所以pc上同時自動運行了一個server。之所以這樣做是為了方便調試。每次你改完代碼后， watchman 會檢查到改動。同時模擬器或者真機上的debug版程序會有調試功能，你可以在模擬器中重新加js載腳本，改動就被拉到了移動端。 至于怎么發布獨立apk參考下文。
react開發理念
相信做完上面的quick start，你應該已經會自己創建一個RN工程，在模擬器上跑起來了。 如果依舊對react本身的一些概念（如JSX，組件，state）不太了解，可以看下 阮一峰的博客 。
react-native工程
工程結構
react-native init命令可以創建一個RN的工程，初次創建出來結構是這個樣子的。
-
node_modules和 package.json 。這個就不必多說了，RN工程也是使用npm去管理依賴的。默認的依賴只有react-native一個包，就是RN自己的代碼。
-
android這個目錄。這是一個標準的android工程，非死book并沒有施加什么魔法，去改造android工程。最終代碼寫完后要發布也只需這個android工程就行了。 ios 目錄也是一樣的， 是個Xcode工程。
那么RN的代碼怎么生效的呢？實際上在根目錄下執行react-native run-android后，android工程中gradle的依賴關系會去先編譯node_modules下RN的代碼，并加入自己的工程中。這也就是第一次跑的時候構建比較慢并且需要裝NDK的原因。
-
index.android.js和index.ios.js這就是RN工程的主入口，你可以按照自己的組織方式，寫很多react的組件組合成自己的app。最終所有的代碼會根據這個入口文件加載成一個單一的js文件 index.android.bundle 加入到android工程中。android的工程有js解釋器去執行你的代碼。這樣一個獨立的app就誕生了。
二次開發
當然不是每個工程都需要自己重頭去創建空工程然后一步步加各種依賴，創建每個文件。我們很多時候是想用別人的一個開源項目做二次開發。那么如何導出自己的源碼給別人用，以及怎么用別人的模板程序做二次開發？
上文介紹了android目錄的結構，那么我們發布我們的源碼時，實際只要這些依賴關系就行了。android只要工程依賴，不要編譯過后的東西。RN本 身也只要package.json就行了。這樣幾百M 的工程只要幾M別人就可以使用了。這些不需要拷貝的東西可以參考我的 ignore文件 。
其實這樣導出的工程跟react-native init創建的是一樣的。只是少了node_modules，同時多了一些android工程的gradle依賴或者js源碼。因此使用的時候要先用npm install安裝RN部分的依賴。然后直接react-native run-android就會編譯android部分的依賴并在模擬器上跑起來了。
如何裝RN的插件？
從上文可以看出，RN實際有兩套構建系統。
-
npm用來管理RN的插件。
-
android或者ios自己的構建系統。
所以裝插件比較麻煩。以 react-native-icons 這個插件舉例。除了npm install之外，還需要改gradle文件，并通過改java代碼去加載包。明白了原因就行了，麻煩就麻煩點，好在比較好的插件文檔都比較詳細。
打包
原理
我們的debug程序中，js代碼是調試時，不斷從server加載到移動端的。但是發布成獨立apk時，總不能讓app啟動的時候遠程加載js 代碼吧。RN的做法是將所有js打成一個bundle文件，作為android的資源，放在assets目錄下面。而assets下的文件是會在安裝時， 隨工程一并安裝到移動端本地的。這樣apk安裝好后，RN會負責去加載。
步驟
-
將js代碼導成資源
目前android版本需要手動去做。參考 issues 。相信非死book后面的版本會馬上會發布自動導資源的命令。實際現在也挺簡單：當react-native的server啟動后。把http://localhost:8081/index.android.bundle?platform=android這個地址的js拷出來即可。
-
cd to the project directory
-
Start the react-native packager if not started
-
Download the bundle to the asset folder: curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
-
-
生成簽名apk
參考 官網教程 。這里不用android studio，純命令行就可以，官網教程很詳細。最后生成的apk在android/app/build/outputs下面。
-
嫌麻煩可以把以上步驟放在一個 shell腳本 中。