標籤:eclips 推薦 vs2015 local image localhost studio entry 一起
寫在前面:
在網上搜了很多安裝配置文檔,感覺沒有一個真的跟我安裝的過程一模一樣的,東拼拼西湊湊,總算是裝好了,我不會告訴你,斷斷續續,我花了兩天時間。。。一到黑屏報錯就傻眼,幸好在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。
配置環境變數,可以參考這個地址:
http://jingyan.baidu.com/article/db55b609fa946e4ba20a2f56.html
成功的是:
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
這貨是基於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,安裝時只需要選擇c++ 的那一項安裝就行了,你需要在命令列中設定npm config set msvs_version 2015 --global
安裝git for windows
在這裡下載安裝,安裝過程中注意選擇"Run Git from Windows Command Prompt"
。
這個安裝軟體會自動將git添加到環境變數中。
安裝Python
從官網下載並安裝python 2.7.x(3.x版本不行)
我的系統是64位的需要對應的64位的,並且還要在環境變數中配置,在path中添加安裝的目錄,例如安裝在d盤中,d:/python/6、安裝react-native命令列工具譯註:由於眾所周知的網路原因,react-native命令列從npm官方源拖代碼時會遇上麻煩。請將npm倉庫源替換為國內鏡像,在命令列輸入:
npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist
npm install -g react-native-cli
安裝好之後,可以命令列下就有react-native命令了 7、建立RN項目
在電腦上建立檔案夾 AwesomeProject,這個裡面是放在e盤的react_native_workspace目錄下的,命令列進入你目錄AwesomeProject後,輸入react-native init AwesomeProject,等待一段時間(較慢)
8、運行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改為更大的值(單位是毫秒)
這個地方很容易出錯,如果出了其他的錯,檢查一下上面的各個軟體和環境變數是否配置了。
9、運行模擬器
推薦使用BlueStacks不過要小心它推送的廣告和垃圾應用。
如果有真機,可以不必運行模擬器,要配置好驅動,使得adb devices可以看到對應的裝置。
10、安卓運行
保持packager開啟,就是上一步的命令列不關閉的意思
,另外再開啟一個命令列視窗,然後在存放工程目錄下運行(我的是AwesomeProject檔案夾)
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,就應該可以看到啟動並執行結果了。
如果真實裝置白屏但沒有彈出任何報錯,可以在資訊安全中心裡看看是不是應用的“懸浮窗”的許可權被禁止了。
11、安卓調試
開啟Chrome,訪問 http://localhost:8081/debugger-ui,應當能看到一個頁面。按F12開啟開發人員菜單。
在模擬器或真機菜單中選擇Debug JS,即可開始調試。
作者原文:http://www.cnblogs.com/web-sheena/p/5513087.html
寫部落格是為了記住自己容易忘記的東西,另外也是對自己工作的總結,文章可以轉載,無需著作權。希望盡自己的努力,做到更好,大家一起努力進步!
如果有什麼問題,歡迎大家一起探討,代碼如有問題,歡迎各位大神指正!
windows 下android react native詳細安裝配置過程