Window使用AndroidStudio集成ReactNative環境及注意事項

參考來源

必須安裝的依賴有:Nodejs、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

Nodejs 和 Python 傻瓜式一步步安裝,都需要設置path環境變量。
Node 的版本必須大於等於 10,Python 的版本必須爲 2.x(不支持 3.x),而 JDK 的版本必須是 1.8(目前不支持 1.9 及更高版本)。
安裝完 Node 後需要設置 npm 鏡像

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

arn、React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模塊的下載。React Native 的命令行工具用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。
命令行執行下面命令安裝yarn:

npm install -g yarn react-native-cli 

安裝完 yarn 後同理也要設置鏡像源:

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

Android 開發環境

安裝jdk和Android Studio,並下載sdk;

在 SDK Manager 中選擇"SDK Platforms"選項卡,然後在右下角勾選 Show Package Details。展開Android 9 (Pie)選項,確保勾選了下面這些組件。

然後點擊"SDK Tools"選項卡,同樣勾中右下角的 “Show Package Details”。展開"Android SDK Build-Tools"選項,確保選中了 React Native 所必須的28.0.3版本。你可以同時安裝多個其他版本。

配置 ANDROID_HOME 環境變量

創建一個名爲ANDROID_HOME的環境變量(系統或用戶變量均可),指向你的 Android SDK 所在的目錄(具體的路徑可能和下圖不一致,請自行確認):

SDK 默認是安裝在下面的目錄:
c:\Users\你的用戶名\AppData\Local\Android\Sdk

關閉現有的命令符提示窗口然後重新打開,這樣新的環境變量才能生效。

把 platform-tools 目錄添加到環境變量 Path 中

添加環境變量,選中path變量,然後點擊編輯。點擊新建然後把 platform-tools 目錄路徑添加進去。

此目錄的默認路徑爲:
c:\Users\你的用戶名\AppData\Local\Android\Sdk\platform-tools

創建新項目

進入你的工作目錄,運行:

react-native init MyProject

創建完畢後,運行packager:

react-native start

可以用瀏覽器訪問http://localhost:8081/index.bundle?platform=android看看是否可以看到打包後的腳本(看到很長的js代碼就對了)。第一次訪問通常需要十幾秒,並且在packager的命令行可以看到形如[====]的進度條。

注意老版本(低於0.49)的地址爲http://localhost:8081/index.android.bundle?platform=android

如果你遇到了ERROR Watcher took too long to load的報錯,請嘗試修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,將其中的MAX_WAIT_TIME 從25000改爲更大的值(單位是毫秒)

安卓運行
保持packager開啓,另外打開一個命令行窗口,然後在工程目錄下運行

react-native run-android

首次運行需要等待數分鐘並從網上下載gradle依賴。

運行完畢後可以在模擬器或真機上看到應用自動啓動了。

如果apk安裝運行出現報錯,請檢查上文中安裝SDK的環節裏所有依賴是否都已裝全,platform-tools是否已經設到了PATH環境變量中,運行adb devices能否看到設備。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章