react-native學習筆記--史上最詳細Windows版本搭建安裝React Native環境配置

標籤：androi   image   根目錄   rtu   運行   img   package   config   setup   

參考：http://www.lcode.org/react-native/

React native中文網：http://reactnative.cn/docs/0.23/android-setup.html#content

1、安裝Jdk（最好預設安裝路徑盡量別改）

http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html

http://www.jb51.net/article/36811.htm（三個環境變數都配置）

 Java SE Development Kit 8u77 Windows x64187.31 MB  jdk-8u77-windows-x64.exe（64位）親測——必須安裝到磁碟根目錄

2、安裝SDK

最快的方式就是拷同事已經安裝好的sdk（如果自己下載的話解決sdk更新慢FQ問題：http://androiddevtools.cn/）

命令列運行adb檢測sdk安裝成功否

3、安裝node.js

：https://nodejs.org/en/

一路下一步無需配製環境變數點擊安裝後

node -v的命令來測試NodeJS是否安裝成功

4、安裝git

：https://git-for-windows.github.io/

需要配置環境變數參考http://jingyan.baidu.com/album/9f7e7ec0b17cac6f2815548d.html?picindex=1

5.安裝react-native命令列工具react-native-cli

git配置完成後可以clone React-native-cli了，建議大家到將react-native-cli複製到某個盤，不要在c盤直接clone

1)   在命令列中進入你希望RN安裝的目錄

2)   輸入git clone https://github.com/facebook/react-native.git，等待下載

3） 進入剛剛目錄下的react-native目錄下的react-native-cli目錄，輸入npm install -g

安裝好之後，可以命令列下就有react-native命令了

6.建立RN項目

進入你希望建立項目的目錄後，輸入react-native init AwesomeProject，等待一段時間（較慢）

成功後目錄結構

 

 

7.運行package

在命令列中進入項目目錄，輸入react-native start，等待一段時間：成功後

這時候可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android，如果可以訪問表示伺服器端已經可以了。

 

 

8. 安裝Genymotion（忽略-不用管）

Genymotion是一個第三方模擬器，它比Google官方的模擬器更易設定且效能更好。但是，它只針對個人使用者免費。如果你想使用Google模擬器，請往下看。

1. 下載並安裝Genymotion。
2. 開啟Genymotion。如果你尚未安裝VirtualBox，它有可能會提示你安裝。
3. 建立一個模擬器並啟動。

虛擬機器vm virtualbox啟動不了，提示這樣的錯誤，如何解決？

不能為虛擬電腦 Custom Phone - 4.1.1 - API 16 - 768x1280 開啟一個新任務.
Unable to load R3 module D:\New Folder/VBoxDD.DLL (VBoxDD): GetLastError=1790(VERR_UNRESOLVED_ERROR).
返回 代碼:    E_FAIL (0x80004005)   
組件:    Console   
介面:    IConsole{8ab7c520-2442-4b66-8d74-4ff1e195d2b6}

 

http://zhidao.baidu.com/question/369440038457309444.html?fr=iks&word=%B2%BB%C4%DC%CE%AA%D0%E9%C4%E2%B5%E7%C4%D4+Google+Nexus+4+-+4.4.4+-+API+19+-+768x1280+%B4%F2%BF%AA%D2%BB%B8%F6%D0%C2%C8%CE%CE%F1.++Unable+to+load+R3+module+E%3A%5CVB%2FVBoxDD.DLL+%28VBoxDD%29%3A+GetLastError%3D1790+%28VERR_UNRESOLVED_ERROR%29.++%B7%B5%BB%D8+%B4%FA%C2%EB%3AE_FAIL+%280x80004005%29+%D7%E9%BC%FE%3AConsoleWrap+%BD%E7%C3%E6%3AIConsole+%7B872da645-4a9b-1727-bee&ie=gbk

9.運行項目

（先用資料線串連手機，開啟開發人員模式，點擊允許USB安裝。  本人MI5手機，在運行項目安裝apk時報錯，需要關閉：棄用MIUI最佳化，具體請參考文章：

react-native學習筆記--首次安裝apk到小米5報錯

）

剛剛運行package的命令列不要關閉，重新啟動一個新的命令列，

進入項目目錄，輸入react-native run-android

等待運行(如果是第一次運行，首先會下載gradle，時間較長)

運行成功後出現

 

 

10.第一次手機肯定報錯

 

 

點擊Dev Settings後，點擊Debug server host & port for device,設定IP和連接埠

 

 

這裡的IP是電腦的IP，不知道的可以在命令列中輸入ipconfig進行查詢，連接埠號碼固定8081

 

 

設定完成後，回到空白頁面，再次搖一搖手機，選擇Reload JS，程式就運行起來，出現Welcome to React Native！

 

 

 

 

 

 

react-native學習筆記--史上最詳細Windows版本搭建安裝React Native環境配置