react native調試

• 2019 年 10 月 4 日
• 筆記

啟動

安裝較為穩定的版本：0.59.9（如果你想用最新的，必須配置翻牆）

react-native init 項目名 --version 0.59.9  

初始化完畢後，就可以運行了。

進入到你的項目（絕對路徑不要帶中文）。

ios

• ios執行react-native run-ios

該命令會調起Xcode的自帶iPhone模擬器。並單獨開啟一個服務窗口：

經過漫長的編譯之後，看到：

說明項目創建成功。

android

• Android執行react-native run-android

接下來把Android模擬器也配置好：

用android studio打開rn項目，

就可以打開模擬器。

這個時候檢測adb-devices會發現多出一條記錄，那便是模擬器的標識。

有了adb連接，就可以使用react-native run-android了。

看到以下介面，啟動成功

Developer Menu

Developer Menu是React Native給開發者訂製的開發者菜單，來幫助開發者調試React Native應用。

如何在模擬器器上開啟Developer Menu

Android模擬器:

可以通過 Command⌘ + M 快捷鍵來快速打開Developer Menu。也可以通過模擬器上的菜單鍵來打開。如果是真機調試，也可以」搖一搖」打開。

心得:高版本的模擬器通常沒有菜單鍵的，不過Nexus S上是有菜單鍵的，如果想使⽤用菜單鍵，可 以創建⼀一個Nexus S的模擬器。

在iOS上開啟：可以通過 Command⌘ + D 快捷鍵來快速打開Developer Menu。

以下對開發者菜單進行分類解釋：

reload

Reload 選項，單擊 Reload 可讓React Native重新載入js。對於iOS模擬器器你也可以通過 Command⌘ + R 快捷鍵來替代，對於Android模擬器器可以通過雙擊 r 鍵來載入js。

提示:如果 Command⌘ + R 無法使你的iOS模擬器器載入js，則可以通過選中Hardware menu中 Keyboard選項下的 「Connect Hardware Keyboard」 。

Enable Live Reload

該選項提供了React Native動態載入的功能。當你的js程式碼發⽣生變化後，React Native會自動⽣成 bundle,然後傳輸到模擬器或手機上 。

Errors and Warnings

在development模式下，js部分的Errors 和 Warnings會直接列印在⼿機或模擬器螢幕上，分別以紅屏和黃屏展示。

errors：React Native程式運行時出現的Errors會被直接顯示在螢幕上，以紅⾊的背景顯示，並會列印出錯誤信 息。你也可以通過 console.error() 來⼿手動觸發Errors。

不要過分相信報錯資訊！因為錯誤定位經常是不準確的。

Warnings ：React Native程式運行時出現的Warnings也會被直接顯示在螢幕上，以黃⾊的背景顯示，並會列印出警 告資訊。你也可以通過 console.warn() 來⼿手動觸發Warnings。

程式設計師通常是不會重視警告的，況且警告特別煩人。你可以通過 console.disableYellowBox = true 來手動禁⽤用Warnings的顯示，或者通過 console.ignoredYellowBox = ['Warning: ...'];來忽略相應的Warning 。

Debug JS Remotely

瀏覽器對於前端來說實在是太常用的工具了。如果能在類似瀏覽器環境下做開發，會非常愜意。

因此rn提供了Debug JS Remotely功能：顧名思義，就是遠程js調試。點擊之後會調起chrome，打開了<http://localhost:8081/debugger-ui/>地址。

如圖所示，開發者可以在瀏覽器環境下做斷點調試。