1. 程式人生 > >React Native For Android Windows下環境搭建

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.