react-native —— 在Mac上搭建React Native Android開發環境

須要：JDK，Android SDK，Node.js

 

1.安裝JDK

去 Java官網下載列表選擇Mac OS X x64版

 

2.安裝Android SDK

雖然如今谷歌推薦使用Android Studio，可是我仍是選擇了單獨安裝Android SDK。

這是一個比較全的目錄，上面的連接是官方的，有wall，用下面的基本都是網盤資源，速度還能夠，記得修改Android SDK在線更新鏡像服務器。

PS：在Android SDK Manager裏要裝API 23的

 

安裝完成後，必定要設置環境變量：

進入用戶主目錄下

$cd ~

而後若是目錄下不存在.bash_profile文件，則建立該文件

$touch .bash_profile

打開該文件

$open .bash_profile

接着在文件中加入如下兩行，{/your/sdk/path/}是你的SDK文件夾的路徑

export ANDROID_HOME={/your/sdk/path/}android-sdk-macosx
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

保存並退出，而後執行

$source .bash_profile

最後測試一下

$adb version

出現 Android Debug Bridge version 1.0.32 

輸入 $android 會打開Android SDK Manager

自此，設置環境變量成功

 

3.安裝nvm, Node.js, watchman, flow

(1)官方說推薦使用 Homebrew的方式安裝nvm, watchman, flow。

安裝nvm後，運行

$nvm install node
$nvm alias default node

install 命令可能須要在前面加上sudo命令，根據提示輸入密碼，才能獲取安裝權限

安裝最新版本Node.js

(2)固然也能夠在 node.js官網直接下載

 

輸入$node -v 檢測是否成功安裝

 

4.安裝React-native-cli

$npm install -g react-native-cli

-g意思是全局安裝

$open /usr/local/lib/node_modules

能夠看到npm在全局安裝的全部包

 

5.初始化示例項目

$react-native init AwesomeProject

須要等待一段時間，而後打開

$cd AwesomeProject
$react-native run-android

第一次運行可能會安裝gradle，速度有點慢，要耐心，等等等。。。

PS：測試推薦使用真機，安卓虛擬機啓動速度不想吐槽。。。

真機調試時，若是一打開一片紅，「Unable to download JS bundle」，請搖晃手機，在彈出的選單裏選擇Dev Settings，選Debug server host for device，而後輸入電腦的IP地址，此時手機要與電腦（編譯環境）在同一Wifi環境下

歡迎界面：

 

6.編輯代碼

打開index.android.js並修改部分代碼，保存

搖動手機，點Reload JS，能夠看到界面變化了（增長靜態資源時，須要從新編譯）

 

參考： http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html