1. 程式人生 > >Android Studio環境下搭建ReactNative

Android Studio環境下搭建ReactNative

1.安裝Android Studio
首先肯定是 安裝Android Studio(包含SDK)(國內推薦)
ps:這裡有一點要注意,需要為SDK配置環境變數,名稱必須為ANDROID_HOME

2.安裝Nodo.js(自帶npm)
官網下載node.js的官方4.1版本或更高版本。
安裝完成後建議設定npm映象以加速後面的過程(或使用科學上網工具),也可使用nrm具體參考連結

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

3.下載並安裝Git for Windows


在安裝過程中,請務必記得勾選Run Git from Windows Command Prompt,這樣會把Git的可執行程式加入到PATH環境變數中,這樣其他程式才能在命令列中正確呼叫Git

4.安裝genymotion(使用Android實體機除錯的可以跳過此步驟)
Android Studio自帶的AVD速度實在不敢恭維,為了速度,安裝genymotion 這個Android虛擬機器,需註冊,安裝完成後,進入 genymotion 新建虛擬機器即可。


下載genymotion

5.安裝C++環境
推薦從itellyou下載並安裝Visual Studio 2013或2015。也可選擇Windows SDK、cygwin或mingw等其他C++環境。編譯node.js的C++模組時需要用到。

6.安裝Python
官網下載並安裝python 2.7.x

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

npm install -g react-native-cli

8.建立react-native專案

react-native init RNTest

9.執行packager(服務端)
進入專案根目錄執行

react-native start

npm start

10.安卓執行(參考ReactNative中文社群)
保持packager開啟,另外開啟一個命令列視窗,然後在工程目錄下執行

react-native run-android

首次執行需要等待數分鐘並從網上下載gradle依賴。
執行完畢後可以在模擬器或真機上看到應用自動啟動了。
如果gradle依賴下載出現報錯,請多試幾次,或者設定VPN加速。
如果apk安裝運
行出現報錯,請檢查上文中安裝SDK的環節裡所有依賴是否都已裝全,platform-tools是否已經設到了PATH環境變數中,執行adb devices能否看到裝置。
至此,應該能看到APP執行,並報錯 Unable to download JS bundle

搖晃裝置或按Menu鍵可以開啟除錯選單,點選Dev Settings,選Debug server host for device,輸入你的正在執行packager的那臺電腦的區域網IP加:8081(同時要保證手機和電腦在同一網段,且沒有防火牆阻攔),再按back鍵返回,再按Menu鍵,在除錯選單中選擇Reload JS,就應該可以看到執行的結果了。


配置伺服器


如果真實裝置白屏但沒有彈出任何報錯,可以在安全中心裡看看是不是應用的“懸浮窗”的許可權被禁止了。

11.遇到的坑(耽擱我一個通宵!!!)
在第9步中我們發現命令列視窗可以發現為該服務分配了8081埠,我們可以通過瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android檢視返回JS是否正確。
不過一直.babelrc.stage 報錯

解決方案就是去

RNTest\node_modules\react-deep-force-update

刪掉.babelrc

12.日常環境開發配置(Android Studio + WebStorm)
走到這一步,可以關閉所有的視窗了


WebStorm配置
WebStorm配置
咱們用的是npm
照著配置一下,其實和第9步的一樣
完成,執行
Android Studio


ps:Android Studio無需配置,只需import,不過import時候注意目錄,是在ReactNative專案根目錄的android目錄下,否則Android Studio無法編譯除錯



文/一個熟悉而又陌生的人(簡書作者)
原文連結:http://www.jianshu.com/p/1a3452aaa578
著作權歸作者所有,轉載請聯絡作者獲得授權,並標註“簡書作者”。