React-Native環境搭建（Windows for Android）

轉載請註明出處：http://blog.csdn.net/crapulencezzz/article/details/52830207

古語有云：君欲善其事，必先利其器。萬事開頭難，這次就來教大家怎麼搭建React-Native的開發環境。由於我是在Windows平臺上開發Android應用，其他平臺的可以移步下面網站找尋你們對應的教程：

• React Native官方網站：https://facebook.github.io/react-native/
• React Native官方網站中文版：http://reactnative.cn/
• 江清清的技術專欄：http://www.lcode.org/react-native/

好了，廢話不多說，開始今天的教程。需要安裝的軟件如下：

JDK
這個做過Andriod和Java開發的就不用我詳細介紹了吧。
下載地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html
注意下載的時候區分x86和x64，x86的爲32位操作系統，x64的爲64位操作系統。
安裝完成後配置環境變量如下：

這裏是把你安裝JDK的bin目錄配置到path：


配置完環境變量可以試着在命令行執行下面的命令，如果出現對應的版本號說明配置成功：

其他軟件的環境變量配置和上面類似，後面就不一一列舉了。

Android Studio
作爲Android開發者不可能不知道這個IDE工具吧。
下載地址：

• https://developer.android.com/studio/index.html（官網，需要梯子）
• http://www.androiddevtools.cn/（國內的一個不錯的可以下載Android開發工具的網站）

安裝完成後第一次啓動Android Studio它會讓你去導入本地SDK或者去官網下載SDK，注意下載安裝要保證以下項目已經更新到最新或者保證是下面的版本號，如果後面出問題了可以看看這裏的配置是否正確。

Tools/Android SDK Tools (24.3.3)
Tools/Android SDK Platform-tools (22)
Tools/Android SDK Build-tools (23.0.1)（這個必須版本嚴格匹配23.0.1）
Android 6.0 (API 23)/SDK Platform (1)
Extras/Android Support Library(23.0.1)
Extras/Android Support Repository

另外還需要將sdk目錄下的platform-tools配置到環境變量中。

Node.js
React Native是基於JS的，node.js是輕量級的Web服務器，想要RN項目跑起來就需要安裝node.js。
下載地址：https://nodejs.org/en/，下載4.1或更高版本。
下載安裝後檢查是否安裝成功以及對應的版本：

這裏建議設置npm鏡像地址以加速後面的過程（或者使用科學上網工具）：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Git
版本控制工具，不用多提了吧。
下載地址：https://git-scm.com/download/win

Python
node.js中使用GYP進行項目構建管理，而GYP是基於Python的構建工具，所以需要安裝Python。
下載地址：https://www.python.org/downloads/
注意要下載2.7.x版本，貌似不支持3.x版本。

C++環境
在Windows環境下，node.js採用GYP來生成Visual Studio Solution文件，需要通過C++的編譯器將其編譯爲二進制文件。
下載地址：http://msdn.itellyou.cn/
下載Visual Studio 2013或2015。也可選擇Windows SDK、cygwin或mingw等其他C++環境。編譯node.js的C++模塊時需要用到。如果使用VS2015，你需要在命令行中設置：

npm config set msvs_version 2015 --global

React Native命令行工具
執行下面的命令：

npm install -g react-native-cli

==================華麗的分割線==================

前面都弄完了就可以創建RN項目了。
1、進入你的工作目錄，執行下面的命令就可以創建你的RN項目：

react-native init HelloRN

耐心等待數十分鐘。。。

運行完後生成的包目錄結構如下：

2、運行packager

react-native start

接着等。。。直到出現 React packager ready.

這時候就可以用瀏覽器訪問：http://localhost:8081/index.android.bundle?platform=android，如果可以看見很長的一段JS代碼，說明就OK了。

3、運行項目到模擬器或真機
注意這時候前面的那個命令窗口不要關閉，需要另開一個命令窗口，執行下面的命令：

react-native run-android

然後又是漫長的等待，這中間可能要等上一個小時也不爲過。因爲需要去網上下載gradle依賴，也還可能會報錯，比如下面的：

error: closed
Could not run adb reverse: Command failed: D:\Develop\android-sdk/platform-tools/adb -s 040BBGNKRJGD reverse tcp:8081 tcp:8081

這時候就需要檢查前面的SDK是否正確，環境變量是否配置等。上面的錯誤可以參考這個問題：http://stackoverflow.com/a/38870535/6482350

出現Starting以後你的手機或者模擬器應該會出現一個紅屏頁面，這是正常的，這時候搖一搖手機可以出現一個對話框，選擇Dev Settings，點擊Dubug server host & port for device，設置IP和端口（正在運行packager的電腦的局域網IP，端口爲8081，注意這時候電腦和手機要在同一網段內）。我用的魅族MX2（Android 4.4）做的測試，發現搖一搖以後並沒有任何反應，然後我就手動設置了代理，並在電腦上使用Fiddler工具保證手機代理到電腦的網絡。



設置完代理後，點擊紅屏裏的Reload，哈哈，終於出來了React Native的歡迎界面！至此，前期的搭建過程完成！