windows 下android react native詳細安裝配置過程

標籤：

寫在前面：

在網上搜了很多安裝配置文檔，感覺沒有一個真的跟我安裝的過程一模一樣的，東拼拼西湊湊，總算是裝好了，我不會告訴你，斷斷續續，我花了兩天時間。。。一到黑屏報錯就傻眼，幸好在react群裡遇到了熱心的同行，還有同事的協助。。。廢話就到這裡了，此處只是記錄我自己裝載的過程，系統內容各種不一樣，可能或多或少有差異。

我的電腦，windows7 64位之前已經裝了eclipise，java，jdk，所以，有些安裝文檔上面的java的jdk和c++，我電腦上並不需要。

這裡我還是都粘貼上來。

參考的好的連結：

react中文論壇上的安裝文檔

史上最詳細Windows版本搭建安裝React Native環境配置

genymotion虛擬機器的安裝說明：

http://www.codeceo.com/article/android-genymotion-config.html

 

1、安裝JAVA JDK

從Java官網下載JDK並安裝。請注意選擇x86還是x64版本。http://jdk.android-studio.org/

推薦將JDK的bin目錄加入系統PATH環境變數。安裝完成後測試path環境 cmd命令列輸入java。

成功的是：

 

2、安裝Android SDK

可以單獨安裝Android SDK，也可以通過Eclipse ADT或者Android Studio一併安裝。我是使用的Android Studio，請注意選擇x86還是x64版本。過程很緩慢，因為檔案很大，也看網速的。為了加速下載，推薦從AndroidDevTools下載。

一直預設安裝下載下來，也沒有出現其他的問題，下下來之後，找到file-->setting-->android sdk  紅框中的這些都要打鉤和安裝，過程很慢。其中Android SDK Build-tools一定要選擇“Android SDK Build-tools version 23.0.1 ”（23.0.1這個版本的，有很多個不同版本）。

 

3、安裝android環境設定Android SDK這些都下載安裝完成之後，還要配置環境變數，就是android環境設定

1、建立，ANDROID_HOME：Android SDK Manager的位置

例如我的電腦上面：（ANDROID_HOME=> C:\Users\hsq\AppData\Local\Android\Sdk）

2、設定環境變數PATH：例如：（PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

開啟命令列輸入 android 和 adb 分別測試一下，測試成功才行。

4、安裝node

這貨是基於js的，node.js輕量級的Web伺服器，想要是React Native跑起來需要安裝node， 如果沒有安裝node.js，先去官網安裝node.js,最好是最新6.0版本

：https://nodejs.org/en/

下載node.js，找好對應的版本，然後去安裝就可以了。
大家可以通過node -v的命令來測試NodeJS是否安裝成功

5、安裝C++環境

這個裡面的幾個軟體，我都安裝了。

推薦從itellyou下載並安裝Visual Studio 2013或2015。也可選擇Windows SDK、cygwin或mingw等其他C++環境。編譯node.js的C++模組時需要用到。
如果使用VS2015，你需要在命令列中設定npm config set msvs_version 2015 --global

安裝git for windows

在這裡下載安裝，安裝過程中注意選擇"Run Git from Windows Command Prompt"。

安裝Python

從官網下載並安裝python 2.7.x（3.x版本不行）

6、安裝node.js

從官網下載node.js的官方最新版本。

建議設定npm鏡像以加速後面的過程（或使用科學上網工具）。

安裝後命令列輸入npm測試是否成功。

 譯註：由於眾所周知的網路原因，react-native命令列從npm官方源拖代碼時會遇上麻煩。請將npm倉庫源替換為國內鏡像，在命令列輸入：

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

 7、安裝react-native命令列工具

npm install -g react-native-cli

安裝好之後，可以命令列下就有react-native命令了 8、建立RN項目

在電腦上建立檔案夾 AwesomeProject，這個裡面是放在e盤的react_native_workspace目錄下的，命令列進入你目錄AwesomeProject後，輸入react-native init AwesomeProject，等待一段時間（較慢）

9、運行packager

react-native start

運行ok，可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包後的指令碼（看到很長的js代碼就對了）。第一次訪問通常需要十幾秒，並且在packager的命令列可以看到形如[====]的進度條。

如果你遇到了ERROR Watcher took too long to load的報錯，請嘗試修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js，將其中的MAX_WAIT_TIME 從25000改為更大的值（單位是毫秒）

這個地方很容易出錯，如果出了其他的錯，檢查一下上面的各個軟體和環境變數是否配置了。

10、運行模擬器

推薦使用BlueStacks不過要小心它推送的廣告和垃圾應用。

如果有真機，可以不必運行模擬器，要配置好驅動，使得adb devices可以看到對應的裝置。

安卓運行

保持packager開啟，就是命令列不關閉的意思，另外開啟一個命令列視窗，然後在工程目錄下運行

react-native run-android

首次運行需要等待數分鐘並從網上下載gradle依賴。（這個過程螢幕上可能出現很多小數點，表示下載進度。這個時間可能耗時很久，也可能會不停報錯連結逾時、串連中斷等等——取決於你的網路狀況和牆的不特定阻斷。總之要順利下載，請使用穩定有效科學上網工具。）

運行完畢後可以在模擬器或真機上看到應用自動啟動了。

如果apk安裝運行出現報錯，請檢查上文中安裝SDK的環節裡所有依賴是否都已裝全，platform-tools是否已經設到了PATH環境變數中，運行adb devices能否看到裝置。

至此，應該能看到APP紅屏報錯，這是正常的，我們還需要讓app能夠正確訪問pc端的packager服務。

搖晃裝置或按Menu鍵（Bluestacks模擬器按鍵盤上的菜單鍵，通常在右Ctrl的左邊 或者左Windows鍵旁邊），可以開啟調試菜單，點擊Dev Settings，選Debug server host for device，輸入你的正在運行packager的那台電腦的區域網路IP加:8081（同時要保證手機和電腦在同一網段，且沒有防火牆阻攔），再按back鍵返回，再按Menu鍵，在調試菜單中選擇Reload JS，就應該可以看到啟動並執行結果了。

如果真實裝置白屏但沒有彈出任何報錯，可以在資訊安全中心裡看看是不是應用的“懸浮窗”的許可權被禁止了。

安卓調試

開啟Chrome，訪問 http://localhost:8081/debugger-ui，應當能看到一個頁面。按F12開啟開發人員菜單。

在模擬器或真機菜單中選擇Debug JS，即可開始調試。

 

 

windows 下android react native詳細安裝配置過程