react-natve,Windows系統下配置（解決大部分BUG）

標籤：

題外：最近沉迷於手機端開發，對於js調用原生頗感興趣，體驗過Apache的cordova後 ，又對 Facebook的react-native引起了興趣，故此配置過程發一波，因為配置確實是問題百出，讓人痛不欲生，希望自己的經曆能對大家有些協助。

 

開始：

一、首先安裝最新的 node

官網：https://nodejs.org/en/

 

二、安裝Android SDK,並配置好環境變數。

過程略，百度全是，隨便搜，必備SDK，版本自行匹配。

 

三、開始配置react-native

cmd 命令視窗下運行：

npm install -g react-native-cli

等待完成，即可。

安裝完成後，就可以建立 react-native項目了。

react-native init Test

Test是項目名，命令視窗所在路徑就是項目路徑。 我習慣放在根目錄上
所以項目所在（D:/Test）
需要等待很長一段時間。幾百MB的檔案。
（PS:過程中安裝失敗過，如果反覆安裝失敗，重啟下電腦再試）

這時候我們輸入：

cd Test

進入項目路徑，到這裡暫停下，使用模擬器。

四、模擬器調試

這裡使用官方推薦的Menymotion 模擬器

官網：https://www.genymotion.com/download

PS:需要註冊一個帳號後 下載，以及安裝後登入用。

選擇143.44mb這個下載，安裝。

+Add 添加一個模擬器。

選擇你的版本匹配的模擬器。啟動

OK

這時候新開啟一個cmd命令視窗運行 react-native 需要的js server

cd 進入項目所在路徑，輸入:

react-native start

不用關，等待啟動完成即可

回到之前的cmd命令視窗，輸入：

react-native run-android

就會自動在模擬器上運行，如果沒有運行 輸入： （adb devices）檢查是否有裝置。

 

五、模擬器操作

這時候螢幕是一片紅，不用怕，正常。

首先開啟模擬器的wifi，串連上。

然後按 menu 健，選擇 Dev Settings

點擊 Debugger server host & port for device

輸入你的PC電腦IP，比如 ：192.168.X.X:8081  

PS：一定要輸入連接埠號碼！

ok！然後 點擊返回，按menu 健 點擊 reload js 就會開始載入。

PS: 這裡要關注一下js server 的 命令視窗，裡面顯示安裝進度，如果安裝到 99%失敗 error了，請根據報錯路徑提示，刪除路徑下的.babelrc 檔案 重新點擊 reload js 即可。

OK！之後可以參考官方demo進行開發測試了

react-natve,Windows系統下配置（解決大部分BUG）