1. 程式人生 > >一步一步在Windows下搭建React Native Android開發環境

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

搭建JAVA開發環境

根據作業系統分為x86或x64位的,下載jdk1.8以上的版本,

本機安裝時的java版本:jdk-8u45-windows-x64.exe




配置JAVA的環境變數
JAVA_HOME = C:\Program Files\Java\jdk1.8.0_45
CLASSPATH = .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
path 增加;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;


安裝Android Studio

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


增加Android SDK的環境變數配置

ANDROID_HOME = D:\Android\sdk
path 增加 ;%ANDROID_HOME%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

安裝NodeJS開發環境

安裝Git版本控制

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

安裝虛擬機器

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

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

安裝React-native-cli



npm install -g react-native-cli


初始化專案


react-native init reactNative


啟動專案

react-native start

頁面如圖上:


這個頁面的說明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


react-native run-android
執行可能需要一些時間。要耐心等待

安卓除錯



目前Windows下無法自動開啟chrome進行除錯,所以手動開啟chrome,訪問如下地址: http://localhost:8081/debugger-ui 即可。