1. 程式人生 > >在Windows下搭建React Native Android開發環境(加入下載連結)

在Windows下搭建React Native Android開發環境(加入下載連結)

1.安裝JDK

從Java官網下載JDK並安裝。請注意選擇x86還是x64版本。
推薦將JDK的bin目錄加入系統PATH環境變數。

 - 官網連結:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
 - 備用:http://www.cr173.com/soft/14290.html
 - jdk環境搭建:http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html

2.安裝Android SDK

可以單獨安裝Android SDK,也可以通過Eclipse ADT或者Android Studio一併安裝。推薦使用Android Studio,以下說明會預設以Android Studio的方式說明。請注意選擇x86還是x64版本。

然後進入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)

推薦使用騰訊Bugly的映象加速下載。檢視說明


推薦將SDK的platform-tools子目錄加入系統PATH環境變數。
推薦將SDK的根目錄新增到新建的ANDROID_HOME的變數值中,就像這樣【否則可能在react-native run-android時,會報錯】
這裡寫圖片描述


3.安裝C++環境

推薦從itellyou下載並安裝Visual Studio 2013或2015。也可選擇Windows SDK、cygwin或mingw等其他C++環境。編譯node.js的C++模組時需要用到。
原文推薦使用visualStudio來安裝C++環境,這裡我推薦安裝cygwin,因為visual太大了,mingw倒沒試過,安裝cygwin的時候,注意把C++的都勾選上

cygwin離線下載包:http://www.cr173.com/soft/60977.html
cygwin安裝教程:http://jingyan.baidu.com/article/6b97984d83dfe51ca2b0bf0e.html

4.安裝node.js

從官網下載node.js的官方4.1版本或更高版本。

官網:https://nodejs.org/
中文官網:http://nodejs.cn/
安裝教程:http://www.runoob.com/nodejs/nodejs-install-setup.html

注意安裝npm和加入到環境變數中


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

官方的安裝方法是

npm install -g react-native-cli

或者直接在React Native的Github頁面右側點選Download ZIP,下載後解壓,並執行以下程式碼:

cd react-native-cli
npm install -g

6.建立專案

進入你的工作目錄,執行

react-native init MyProject

並耐心等待數分鐘。
【這裡經常因為網路的原因下載專案失敗,沒關係,可以利用vpn連結再嘗試下載,要使用免費的vpn的話,在文章的最下邊有提供方法】


7.執行packager

如果你有cygwin,可以在cygwin環境中進入工程目錄,執行

npm start

如果沒有cygwin或不在cygwin環境中,可以進入工程目錄,cmd命令執行

node node_modules\react-native\packager\packager.js

可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包後的指令碼。第一次訪問通常需要十幾秒,並且在packager的命令列可以看到進度條。如果遲遲看不到進度條,請檢查上面的修改是否已經做到或重新執行命令


8.執行模擬器

直接用AVD Manager執行就行了

AVD使用說明:http://jingyan.baidu.com/article/a681b0ded7e7573b1943465b.html

9.安卓執行

保持packager開啟保持avd模擬器執行,另外開啟一個命令列視窗,然後在工程目錄下執行

react-native run-android

首次執行需要等待數分鐘並從網上下載gradle依賴。
執行完畢後可以在模擬器或真機上看到應用自動啟動了。
執行完成控制檯[第二個開啟]應該是這個樣子的:
這裡寫圖片描述

如果gradle依賴下載出現報錯,請多試幾次,或者設定VPN加速。【如何免費使用vpn,看文章的結尾

如果出現:com.android.builder.testing.api.DeviceException: No connected devices!,請執行avd模擬器

如果apk安裝執行出現報錯,請檢查platform-tools是否已經設到了PATH環境變數中,執行adb devices能否看到裝置。

成功執行後控制檯[第一個]應該是這個樣子:
這裡寫圖片描述

至此,應該能看到APP執行,並報錯 Unable to download JS bundle

搖晃裝置或按Menu鍵(Bluestacks模擬器按鍵盤上的選單鍵,通常在右Ctrl的左邊 或者左Windows鍵旁邊),可以開啟除錯選單,點選Dev Settings,選Debug server host for device,輸入你的區域網IP,再按back鍵返回,再按Menu鍵,在除錯選單中選擇Reload JS,就應該可以看到執行的結果了。


10.安卓除錯

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



免費試用VPN方法:

進入
http://www.jdyvpn.com.cn/
註冊筋斗雲,下載客戶端,看試用說明,就可以免費試用1個小時了
【只能有一個小時,推薦用美國高速,然後隨便選個,使用】
【推薦在第6步,和第9步的時候,再使用vpn,因為只有一個小時。。】