React Native For Android Windows下環境搭建
準備工作
JDK
Android SDK
C++環境
node.js
react-native命令列工具
安裝JDK
從Java官網下載JDK並安裝。請注意選擇x86還是x64版本。
推薦將JDK的bin目錄加入系統PATH環境變數。
安裝Android SDK
可以單獨安裝Android SDK,也可以通過Eclipse ADT或者Android Studio一併安裝。推薦使用Android Studio,以下說明會預設以Android Studio的方式說明。請注意選擇x86還是x64版本。
為了加速下載,推薦從AndroidDevTools下載。
然後進入SDKManager(可通過Android Studio選單Tools-Android-SDK Manager),確保以下專案已經安裝並更新到最新:
Tools/Android SDK Tools (24.3.3)
Tools/Android SDK Platform-tools (22)
Tools/Android SDK Build-tools (23.0.1)
Android 6.0 (API 23)/SDK Platform (1)
Extras/Android Support Library(23.0.1)
設定環境變數ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => D:\Program Files\Android SDK Tools)設定環境變數PATH:例如:(PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)
安裝C++環境
推薦從itellyou下載並安裝Visual Studio 2013或2015。也可選擇Windows SDK、cygwin或mingw等其他C++環境。編譯node.js的C++模組時需要用到。
安裝node.js伺服器端
到node.js的網站上下載node.js然後安裝上就可以了。
https://nodejs.org/en/
安裝React-native-cli
npm install -g react-native-cli
初始化專案
react-native init reactNative
如果報錯了(新版本node的不會報錯)
This will walk you through creating a new React Native project in d:\www\project
\reactNative
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn npm ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
windows下執行到這裡就會報錯,原因是npm在windows下的bug(來源於參考資料)。解決辦法,直接clone專案主分支master。
git clone https://github.com/facebook/react-native.git
cd react-native/react-native-cli && npm install -g
接下來就可以初始化專案了
react-native init reactNative
啟動服務端代理
react-native start
這條命令會看見程式開啟了8081埠, 可以看見專案程式碼輸出。
Run android app
cd reactNative //進入專案目錄
react-native run-android
如果沒有安裝安卓模擬器,這裡可以直接使用真機安裝測試。這個過程很漫長,等等等……
如果順利到這裡已經完全可以跑起來專案了。
執行結果如下圖:
安卓除錯
目前Windows下無法自動開啟chrome進行除錯,所以手動開啟chrome,訪問如下地址: http://localhost:8081/debugger-ui 即可。
ps:你可能會遇到
報錯了(1)
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> failed to find target with hash string 'android-23' in: D:\Program Files\Andro
id SDK Tools
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.
BUILD FAILED
Total time: 10 mins 42.463 secs
Could not install the app on the device, see the error above.
解決辦法就是安裝Android-23。
報錯了(2):
Could not find com.android.support:appcompat-v7:版本號.
安裝 Android Support Libraries 和 Android Support Repository
(3):build成功,安裝上apk後介面紅了
解決辦法
首先看看你的服務有沒有啟動成功,就是上面提到的啟動服務端代理。
如果伺服器啟動成功則:
選擇選單(搖晃手機或者按選單鍵):Dev settings
選擇項:Debug server host for device
設定編譯環境PC的IP地址,例如:192.168.1.5
確保手機與編譯環境在同一WIFI環境下(IP段相同),server在執行狀態下,重啟APP.