一步一步在Windows下搭建React Native Android開發環境

搭建JAVA開發環境

根據操做系統分爲x86或x64位的,下載jdk1.8以上的版本,html

本機安裝時的Java版本:jdk-8u45-windows-x64.exenode




配置JAVA的環境變量python

[html] view plain copyreact

 print?在CODE上查看代碼片派生到個人代碼片android

  1. JAVA_HOME = C:\Program Files\Java\jdk1.8.0_45  
  2. CLASSPATH = .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;  
  3. path 增長;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;  


 

安裝Android Studio

本機安裝時的Android Studio版本:androidstudio1.5.0.0.1454148047.exechrome

 

增長Android SDK的環境變量配置npm

 

[html] view plain copywindows

 print?在CODE上查看代碼片派生到個人代碼片react-native

  1. ANDROID_HOME = D:\Android\sdk  
  2. path 增長 ;%ANDROID_HOME%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;  

 

 

安裝NodeJS開發環境

 

安裝流程參考:http://blog.csdn.net/itpinpai/article/details/48103845ruby

 

安裝Git版本控制

本機安裝時的Git版本:Git-1.9.5-preview.exe

安裝流程參考:http://blog.csdn.net/itpinpai/article/details/48105445

 

安裝虛擬機

 

本機安裝時的虛擬機版本:genymotion-2.6.0-vbox

 

這個軟件須要在官網上註冊一個帳號,先註冊才能下載,官網地址:www.genymotion.com/

 

安裝React-native-cli


 

[python] view plain copy

 print?在CODE上查看代碼片派生到個人代碼片

  1. npm install -g react-native-cli  



初始化項目

 

[python] view plain copy

 print?在CODE上查看代碼片派生到個人代碼片

  1. react-native init reactNative  



啓動項目
 

[python] view plain copy

 print?在CODE上查看代碼片派生到個人代碼片

  1. react-native start  

 

執行上句命令後打開下面這個鏈接

http://localhost:8081/index.android.bundle?platform=android

頁面如圖上:

這個頁面的說明android項目沒有編譯成功

須要刪除項目(MyProject)下的這個路徑下的文件:MyProject\node_modules\react-native\node_modules\react-transform-hmr\node_modules\react-proxy\node_modules\react-deep-force-update\.babelrc

以下圖:

 

關閉cmd窗口,再次打開運行react-native start 回車

打開剛纔輸入的鏈接地址頁面顯示以下截圖

 

執行react-native start 可能會報以下圖錯:

 

解決辦法:
修改這個文件F:\reactNative\MyReact\node_modules\react-native\packager\react-packager\src\DependencyResolver\FileWatcher\index.js

把原來的
const MAX_WAIT_TIME = 120000;
修改成

const MAX_WAIT_TIME = 120000000;

 

 

運行 android app

 

[ruby] view plain copy

 print?在CODE上查看代碼片派生到個人代碼片

  1. react-native run-android  

 

運行可能須要一些時間。要耐心等待

 

 

安卓調試



目前Windows下沒法自動打開chrome進行調試,因此手動打開chrome,訪問以下地址: http://localhost:8081/debugger-ui 便可。

相關文章
相關標籤/搜索