本文記錄了我搭建
React-Native
專案時踩過的坑(下稱RN
),以及使用Android
真機執行RN
專案遇到的問題,供大家參考。
初始化 RN
專案
執行 react-native init [your project name]
命令在本地初始化一個 RN
專案
開啟本地 RN
服務
cd
進入專案,不需要 npm install
,因為這步 react-native
已經幫你做好了。直接執行 react-native run-ios
或者 react-native run-android
,可以分別啟動 RN
的 Android
版本和 iOS
版本的 RN
本地伺服器。
我是在 Android 上除錯,直接跑命令 react-native run-android
,這時終端會預設啟動一個 node
服務程式。注意:在開發過程中,兩個視窗都不要關閉,不然 JS
環境下的本地服務會斷掉。
windows
環境下 Android Studio
安裝
雖然你可以使用任何編輯器來開發應用(編寫 js 程式碼),但你仍然必須安裝 Android Studio
來獲得編譯 Android
應用所需的工具和環境。
提示:關於
Android Studio
,可以去官網,也可以去國內社群下載,如果去官網下載,國內使用者必須有穩定的翻牆工具,否則在下載、安裝、配置過程中會不斷遭遇連結超時或斷開,無法進行開發工作。
開始安裝
安裝 Android Virtual Device
注意:安裝的時候需要選中
Android Virtual Device
安裝android
虛擬裝置,不然不管是真機還是模擬器都無法開啟除錯。
安裝目錄的選擇
勾選不需要預設啟動項 安裝完成就可以啟動定義安裝目錄,這裡沒什麼好說的,不過需要注意儘量不要放在
C:\
盤下,因為Android
的SDK
非常吃記憶體。
Android Studio
了。
啟動 Android Studio
構建 Android
模擬器執行環境
如果你第一次安裝,系統檢測不到 SDK
這時候會彈出 SDK
的安裝介面,記得勾選 Android Virtual Device
,一路安裝完成,直接啟動 Android Studio
彈出執行介面,開啟剛剛初始化完成的 RN
專案下的 android
模組。
第一次開啟專案,可能會花費比較長的時間,Android Studio
右下角有進度條和 event log
,左下角有終端,能列印包安裝和 tasks run
時的資訊。首次系統自動安裝可能會失敗,需要手動點選 Install missing platforms
安裝丟失的檔案
等到各種依賴、編譯完成,右上角的 Virtual Device
控制欄的執行按鈕會高亮,選中 app
點選右側的執行按鈕,出現 Virtual Device
選擇彈框,這個時候把真機用資料線接入,在真機上設定成 usb 除錯資料 。如果裝置接入成功,會顯示機型和版本號。
選中需要執行注意:這邊不推薦使用
Android Studio
自帶的模擬器,一來設定麻煩,二來非常吃記憶體,一般情況下,同時執行Android Studio
和模擬器,CPU 幾乎會被全部吃掉。
RN
的真機裝置,點選 ok 就好,有的時候可能會執行不成功,後臺 event log
報錯,這個時候重新啟動一下就好。
啟動 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
真機和本地服務啟動在同一個網段下,簡單說就是連了同一個路由器,不然無法建立連線!!
真機執行 RN
真機執行需要三者同時啟動成功:
- JS 本地服務啟動成功,即執行
react-native run-android
Android Studio
開發裝置啟動成功adb
埠配置成功
所有環境搭建完成,此時 Android
真機會自動安裝 RN
專案的開發包,自動執行,如果執行成功則會出現如下初始介面:
真機除錯 RN
到此為止,專案算是跑起來了,但是怎麼除錯呢?在真機上怎麼喚出控制檯呢?只要搖一搖手機即可。搖一搖手機喚出控制檯如下:
來解釋一下幾個選項的作用:Reload
即刷整個應用,相當於殺掉程式,再重新開啟。Debug JS Remotely
在 PC 瀏覽器上遠端開啟一個 JS 除錯頁面,開啟瀏覽器F12
喚出控制檯,能看到各種程式碼執行的資料,就像寫webview
專案時候一樣。只是如果在真機環境下,開啟這個選項會變得非常卡,這個我還沒有找到好的解決辦法。- Enable Live Reload 開啟自動更改重新整理,和單純
Reload
的區別是,能直接在當前頁面重新整理,不會從歡迎頁再進入一次。和Enable Hot Reloading
的區別是,能夠重新執行該頁面的JavaScript
程式碼,而Enable Hot Reloading
只是更換檢視層的樣式,不會重新執行邏輯。 Enable Hot Reloading
熱更新,搭建頁面時快速看見 Ui 效果時會用- 後面的幾個我也不知道幹啥的,反正對於新手來說,上面四個功能足夠用了。
最後,關於 RN
紅屏報錯的一些指導建議:
- 真機除錯切記,裝置和 PC 需要在同一個網段下。
- 環境跑不了,最常見的錯誤是
JS
本地服務沒有起來,即react-native run-android
命令執行不成功,有的時候除錯報錯,這個服務會預設關閉,需要開發者實時檢視開啟的node
服務列印日誌 JavaScript
程式碼執行有問題,各種問題,包沒找到啊、變數 undefined 啊,標籤未閉合之類……這種情況報錯一般服務不會停,是 500 錯誤,一般這種執行錯誤,真機上的錯誤資訊定位都比較準確,自己對應去查就好。- 如果使用
RN
的一些生態元件,比如react-navigation
導航,一定要注意版本,3.*
的版本的使用方式和2.*
略有不同,一般這種情況下,錯誤日誌只會提示包有問題,會給出一些對應的解決方案,自己去看文件的使用方法,更新到對應版本。 - 有的時候會出現一些莫名其妙的錯誤,可能是包編譯出錯,插拔一下裝置,重新走一遍流程就 OK 了。
總結
以上是我自行搭建環境時踩過的一些坑,目前看來,RN
的社群不是很好,很多問題並不完善,很多解決的方案還需要在探索中不斷總結。