Android 真機搭建 React-Native 環境踩坑記錄

不寫bug的米公子發表於2019-01-11

本文記錄了我搭建 React-Native 專案時踩過的坑(下稱 RN),以及使用 Android 真機執行 RN 專案遇到的問題,供大家參考。

初始化 RN 專案

執行 react-native init [your project name] 命令在本地初始化一個 RN 專案

Android 真機搭建 React-Native 環境踩坑記錄
根據網速,這個初始化的速度有快有慢。如果初始化順利完成,會出現以下提示:

Android 真機搭建 React-Native 環境踩坑記錄

開啟本地 RN 服務

cd 進入專案,不需要 npm install ,因為這步 react-native 已經幫你做好了。直接執行 react-native run-ios 或者 react-native run-android ,可以分別啟動 RNAndroid 版本和 iOS 版本的 RN 本地伺服器。

我是在 Android 上除錯,直接跑命令 react-native run-android,這時終端會預設啟動一個 node 服務程式。注意:在開發過程中,兩個視窗都不要關閉,不然 JS 環境下的本地服務會斷掉。

Android 真機搭建 React-Native 環境踩坑記錄

windows 環境下 Android Studio 安裝

雖然你可以使用任何編輯器來開發應用(編寫 js 程式碼),但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。

提示:關於 Android Studio,可以去官網,也可以去國內社群下載,如果去官網下載,國內使用者必須有穩定的翻牆工具,否則在下載、安裝、配置過程中會不斷遭遇連結超時或斷開,無法進行開發工作。

開始安裝

Android 真機搭建 React-Native 環境踩坑記錄

安裝 Android Virtual Device

Android 真機搭建 React-Native 環境踩坑記錄

注意:安裝的時候需要選中 Android Virtual Device 安裝 android 虛擬裝置,不然不管是真機還是模擬器都無法開啟除錯。


安裝目錄的選擇

Android 真機搭建 React-Native 環境踩坑記錄

定義安裝目錄,這裡沒什麼好說的,不過需要注意儘量不要放在 C:\ 盤下,因為 AndroidSDK 非常吃記憶體。

Android 真機搭建 React-Native 環境踩坑記錄
勾選不需要預設啟動項

Android 真機搭建 React-Native 環境踩坑記錄
安裝完成就可以啟動 Android Studio 了。


啟動 Android Studio 構建 Android 模擬器執行環境

Android 真機搭建 React-Native 環境踩坑記錄
如果你第一次安裝,系統檢測不到 SDK 這時候會彈出 SDK 的安裝介面,記得勾選 Android Virtual Device,一路安裝完成,直接啟動 Android Studio 彈出執行介面,開啟剛剛初始化完成的 RN 專案下的 android 模組。
Android 真機搭建 React-Native 環境踩坑記錄

第一次開啟專案,可能會花費比較長的時間,Android Studio 右下角有進度條和 event log,左下角有終端,能列印包安裝和 tasks run 時的資訊。首次系統自動安裝可能會失敗,需要手動點選 Install missing platforms 安裝丟失的檔案

Android 真機搭建 React-Native 環境踩坑記錄

等到各種依賴、編譯完成,右上角的 Virtual Device 控制欄的執行按鈕會高亮,選中 app 點選右側的執行按鈕,出現 Virtual Device 選擇彈框,這個時候把真機用資料線接入,在真機上設定成 usb 除錯資料 。如果裝置接入成功,會顯示機型和版本號。

注意:這邊不推薦使用 Android Studio 自帶的模擬器,一來設定麻煩,二來非常吃記憶體,一般情況下,同時執行 Android Studio 和模擬器,CPU 幾乎會被全部吃掉。

Android 真機搭建 React-Native 環境踩坑記錄
選中需要執行 RN 的真機裝置,點選 ok 就好,有的時候可能會執行不成功,後臺 event log 報錯,這個時候重新啟動一下就好。
Android 真機搭建 React-Native 環境踩坑記錄


啟動 adb 服務

JavaScript 本地服務啟好,Android Studio 環境搭建好,還需要執行 adb 命令開放測試埠

ADB(Android Debug Bridge)是Android SDK中的一個工具, 使用ADB可以直接操作管理Android模擬器或者真實的Andriod裝置。ADB是一個客戶端-伺服器端程式, 其中客戶端是你用來操作的電腦, 伺服器端是android裝置。

還記得你安裝 Android Studio 之後,安裝 SDK 的目錄嗎?開啟 windows 系統終端,cd 進入 SDK 安裝目錄下的 platform-tools 資料夾,執行 adb reverse tcp:8081 tcp:8081 命令指定開發埠。

注意:執行 adb 命令前需要確保 Android 真機和本地服務啟動在同一個網段下,簡單說就是連了同一個路由器,不然無法建立連線!!

Android 真機搭建 React-Native 環境踩坑記錄

真機執行 RN

真機執行需要三者同時啟動成功:

  1. JS 本地服務啟動成功,即執行 react-native run-android
  2. Android Studio 開發裝置啟動成功
  3. adb 埠配置成功

所有環境搭建完成,此時 Android 真機會自動安裝 RN 專案的開發包,自動執行,如果執行成功則會出現如下初始介面:

Android 真機搭建 React-Native 環境踩坑記錄
終於他媽跑起來了,開心的一批,不容易啊。。


真機除錯 RN

到此為止,專案算是跑起來了,但是怎麼除錯呢?在真機上怎麼喚出控制檯呢?只要搖一搖手機即可。搖一搖手機喚出控制檯如下:

Android 真機搭建 React-Native 環境踩坑記錄
來解釋一下幾個選項的作用:

  1. Reload 即刷整個應用,相當於殺掉程式,再重新開啟。
  2. Debug JS Remotely 在 PC 瀏覽器上遠端開啟一個 JS 除錯頁面,開啟瀏覽器 F12 喚出控制檯,能看到各種程式碼執行的資料,就像寫 webview 專案時候一樣。只是如果在真機環境下,開啟這個選項會變得非常卡,這個我還沒有找到好的解決辦法。
  3. Enable Live Reload 開啟自動更改重新整理,和單純 Reload 的區別是,能直接在當前頁面重新整理,不會從歡迎頁再進入一次。和 Enable Hot Reloading 的區別是,能夠重新執行該頁面的 JavaScript 程式碼,而 Enable Hot Reloading 只是更換檢視層的樣式,不會重新執行邏輯。
  4. Enable Hot Reloading 熱更新,搭建頁面時快速看見 Ui 效果時會用
  5. 後面的幾個我也不知道幹啥的,反正對於新手來說,上面四個功能足夠用了。

最後,關於 RN 紅屏報錯的一些指導建議:

  1. 真機除錯切記,裝置和 PC 需要在同一個網段下。
  2. 環境跑不了,最常見的錯誤是 JS 本地服務沒有起來,即 react-native run-android 命令執行不成功,有的時候除錯報錯,這個服務會預設關閉,需要開發者實時檢視開啟的 node 服務列印日誌
    Android 真機搭建 React-Native 環境踩坑記錄
  3. JavaScript 程式碼執行有問題,各種問題,包沒找到啊、變數 undefined 啊,標籤未閉合之類……這種情況報錯一般服務不會停,是 500 錯誤,一般這種執行錯誤,真機上的錯誤資訊定位都比較準確,自己對應去查就好。
  4. 如果使用 RN 的一些生態元件,比如 react-navigation 導航,一定要注意版本,3.* 的版本的使用方式和 2.* 略有不同,一般這種情況下,錯誤日誌只會提示包有問題,會給出一些對應的解決方案,自己去看文件的使用方法,更新到對應版本。
  5. 有的時候會出現一些莫名其妙的錯誤,可能是包編譯出錯,插拔一下裝置,重新走一遍流程就 OK 了。

總結

以上是我自行搭建環境時踩過的一些坑,目前看來,RN 的社群不是很好,很多問題並不完善,很多解決的方案還需要在探索中不斷總結。

相關文章