打算寫一個系列的文章來記錄一個RN的App從開始到發布的過程。
- 初始化
- 布局
- 組件使用
- SDK
- 打包
react-native 使用JS來開發app，能夠運行於IOS和Android兩大平台。這使得開發App的門檻大大降低，也讓很多本來沒有native App開發能力的公司蠢蠢欲動(比如我們部門)，畢竟這種方式比H5之類的要流暢很多。最近看到微軟又推出了一個有意思的東西：reactxp 。之前RN的熱更新，微軟就有個code push。現在又推出這么一個東西，號稱一處編寫，可以在四個平台上運行，也是蠻有意思的。不過貌似很多大佬都不看好這個項目，不知道能活多久。
一、開發設備
遲早是需要一台mac的。我最初是在windows上做Android環境開發，TP240體驗非常差，reload一次要等很久。而且在搭環境時也很不順利，各種奇葩錯誤。黑蘋果可以湊合一段時間，體驗比在win上要好很多，安裝環境非常順利。但真機調試什么的還是比較麻煩，所以最好還是有一台mac。
在開發時我一般是直接調試iphone模擬器，因為這個reload很快。當一個功能模塊開發完了再跑一下Android的設備，確認功能無誤(一般情況只要沒有用什么特殊組件都是沒什么問題的)。
二、安裝環境
這點不多解釋，如果在win上，各種錯誤都寫不完。而且現在好像是兩周一版本，也許你在win上費力搞了半天修復一個問題，下個版本就變了。如果在mac上，我搭了這么多次環境都非常順利，沒有遇到過什么錯誤。
按照文檔上一步步來就好：http://reactnative.cn/
三、目錄結構
1. 自用
項目初始化就是把項目結構搭起來並且把react-native及它的一些依賴包都安裝上。我一般會使用這樣一個目錄結構
index.xxx.js 是入口文件，這里值得一說的是RN會根據平台自動加載不同名稱的文件，比如這里Android平台就會加載 index.android.js。在其他的自定義組件中也可以使用這樣的命名來區分（如果需要區分平台的話）。
- App
- Assets - 資源文件
- Components - 組件
- Configs - 配置
- Utils - 工具
- Views - 頁面
大概就是這樣的一個目錄，開發下來感覺基本還比較合理。
2. ignite
ignite 這是一個react-native的CLI工具，使用下來感覺像 yeoman。通過一些命令 來生成整個項目並添加頁面、組件等其他東西。
github上的一個 Quick Example:
$ npm install -g ignite-cli $ ignite new PizzaApp $ cd PizzaApp $ ignite add maps $ ignite add vector-icons $ ignite generate screen PizzaLocationList $ ignite generate component PizzaLocation $ ignite generate map StoreLocator $ ignite add i18n $ ignite remove i18n $ ignite i love you
這個在安裝過程中會有一些提示，比如是否需要vector icons什么的。可以根據需要具體安裝。最終呈現出來的目錄是這樣
這個目錄結構比較復雜，具體可以安裝一下自己看。
目錄結構的話，我感覺第一種就挺好也足夠用了，可能我開發的都是一些比較小的App。用不到這么復雜的結構。
四、編輯器
RN開發所用編輯器很多都可以用，畢竟只是寫個JS。webStorm、sublime等等都有，官方推薦的那個Nuclide ，反正我周圍沒什么人用。最近看到一款有意思的編輯器 Deco。只從官網首頁上乍一看很酷炫。但下載下來實際開發的時候，拖控件的功能顯得很雞肋，開發的時候都是自己寫的。不過這讓我想起了微軟的VS系列編輯器（VS Code除外）。如果能堅持做下去，以后也許會很好用。
1. WebStorm
WebStorm 支持 Windows、Mac OS X、Linux 三大桌面平台，不過和 Android Studio 可以免費使用不同，WebStorm 是需要付費使用的，只有 30 天的試用期。 由於 React Native 是基於 React 的，而 React 使用的是 JSX 語法，因此，使用 WebStorm 開發 React Native 之前，我們首先需要設置支持的 Javascript 語法，點擊 WebStorm-Preferences，在打開的對話框中選擇 Javascript language version 為 JSX Harmony 即可在代碼編輯器中識別 JSX，如下圖所示：
2. Deco
Deco : https://www.decoide.org/ ,這款編輯器目前只支持mac環境，它包含控制台，可以直接在編輯器里啟動模擬器。當然最吸引人的是直接拖拽一些組件到界面(當然是代碼界面，不是可視化)。
左下方可以看到那些可拖拽的組件，不止是官方組件還包含一些比較優秀的第三方組件，右側可以調整這些組件的一些屬性，上方啟動模擬器。如果模擬器開啟了hot reload的話，應該就是首頁上的效果：
初始化完成后，就可以開始寫一些東西run起來了。RN里要畫一個頁面，就需要明白它的布局，熟悉它的布局規則才能畫出符合要求並適配何種屏幕的頁面了。
這個下次再寫。
參考鏈接：
http://reactnative.cn/
https://microsoft.github.io/reactxp/
https://www.decoide.org/
http://blog.csdn.net/xiaole0313/article/details/53508026