iOS筆記：React Native環境建置

React Native 是 Facebook 推出的一個用 JavaScript 語言就能同時編寫 iOS，Android，以及後台的一項技術

1. 安裝Node 和 Watchman

    $ brew install node
    $ brew install watchman

Watchman 是來自 Facebook 的檔案監控工具。 React Native 利用 Watchman 來偵測程式碼的變化，以便重新建構。

2. 安裝React Native CLI

    $ npm install -g react-native-cli

3. iOS環境

有安裝Mac的Xcode即可.

4. Android環境

安裝Android studio. 另外還需要Java SE Development Kit 8.

5. Install Android SDK

開啟安裝完的Android studio, 選擇右下角的”Configure”, 選擇 “SDK Manager”, 會出現下面的畫面：

打勾右下角的 Show Package Details, 勾 Android 6.0 (Marshmallow) 下的這些：
- Android SDK Platform
- Google APIs
- Intel x86 Atom System Image
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image

切換到分頁 SDK Tools, 繼續安裝需要的工具.
- Android SDK Build Tools
- Android SDK Tool
- Google Play Services

6. Set up the ANDROID_HOME environment variable

如果你使用的是bash，那就在~/.bashrc文件中加入以下内容，如果是用zsh，那就是~/.zshrc.

    export ANDROID_HOME=~/Library/Android/sdk
    export PATH=${PATH}:${ANDROID_HOME}/tools
    export PATH=${PATH}:${ANDROID_HOME}/platform-tools

7.新增專案

虛擬機的部分我是使用“Genymotion”的. 要注意的是需要設定Android SDK的位址(路徑可以在 SDK Manager 上找到).

新增專案

    $ react-native init HelloWorld

移動到專案中執行”npm start“並先將Android虛擬機開啟.
然後就可以執行run-ios跟run-android.

Issue

1. 會發生這問題的原因是忘記把Android的虛擬機開啟就執行run-android導致.
   Key world: :app:installDebug

Reference:

1. https://facebook.github.io/react-native/
2. https://github.com/facebook/react-native
3. http://reactnative.cn/
4. https://github.com/jondot/awesome-react-native
5. http://makeitopen.com/