『壹』 如何愉快地調試一個 React Native for Android APP
首先確保你的電腦和手機設備在同一個Wi-Fi環境下。
其次你需要開啟USB調試才能在你的設備上安裝你的APP。一定要確定你已經打開設備的USB調試開關!
確保你的設備已經被成功連接,可以輸入adb devices核實:
在右邊那列看到device說明你的設備已經被正確連接了。注意,你只應當連接僅僅一個設備。
因為如果你連接了多個設備(包含模擬器在內),你後續的一些操作可能會失敗。拔掉不需要的設備,或者關掉模擬器,確保adb devices的輸出只有一個是連接狀態。
現在我們可以運行 react-native run-android 來在設備上安裝並啟動我們的應用了
這
句命令執行後,實際上就是在本地起一個node server,並且將你的android
project編譯打包,再上傳到你的手機上。然後當js文件有改動或debug模式下手動選擇reload
js時候會自動更新bundle文件,達到改動js文件後即時顯示的調試效果。
這「紅屏」又是什麼鬼?別著急,是正常的,我們需要連接上開發伺服器,下面的步驟會解決這個問題。
搖晃手機,或者運行adb shell input keyevent 82,可以調出開發者菜單。
點擊進入Dev Settings
點擊Debug server host for device
輸入你電腦的IP地址和埠號(譬如我的是192.168.3.15:8081)
注意:如果你的設備是android5.0以上版本(API 21+),就不用折騰這步了
而是:運行adb reverse tcp:8081 tcp:8081 (建立一個從設備向電腦轉發的埠,前提是設備和電腦通過USB相連)
不需要更多配置,你就可以使用Reload JS和其它的開發選項了
Chrome開發者工具
在Chrome上調試js代碼,需要在開發菜單中選擇Debug JS,這會打開一個新的http://localhost:8081/debugger-uitab頁。
在
Chrome中,按下⌘ + option + i或者選擇視圖(View) -> 開發者(Developer) ->
開發工具(Developer Tools)來打開開發工具控制台。打開有異常時暫停(Pause On Caught
Exceptions)選項,能夠獲得更好的開發體驗。
Chrome中並不能直接看到App的用戶界面,而只能提供console的輸出,以及在sources項中斷點調試js腳本。
要查看APP日誌?
在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的應用的日誌。
實時刷新
這個選項可以在你的js代碼變更了之後,自動觸發所連設備或者模擬器自動刷新。
開啟方法:先打開開發菜單,選擇Dev Settings,然後選擇Auto reload on JS change選項。
到此才能完整的調試Android RN, 繁瑣到累絕不愛。。
等等,能否想辦法簡化一下過程?
既然我們的RN項目里包含了完整的android工程,何不把android工程導入到android studio 去運行?不但可以同時查看js的日誌和native的日誌,而且開發android的同學最熟悉AS,利用AS的快捷鍵和各類插件提升調試效率。
have a try , 答案是肯定的!
執行react-native start 也可以起一個node server,只是它不幫你安裝APP到device 。
以上就是我踩坑後整理的方法,按這套組合拳就可以愉快地調試了。水平有限,拋磚引玉,如果你有更好的方法!歡迎拍磚!
此處插播一個廣告:拍磚請拍到我們的杏樹林開放空間(246078103),期待感興趣的同學加入。
之後要解決的一些issue
1,關於設備MinSdkVerison
RN 只支持Android4.1.2(API16)以上設備,4.0根據網路數據大概佔比0.7比例,隨著大部分app已經不支持4.0以下設備了,這塊倒還可以接受 , 目前我們的病歷夾是3.0(API-11) , 口袋是4.0(API-14)
2,我們的androidRN現在只能通過Debug JS才能渲染出界面,而不能正常的用Reload JS
3,在界面跳轉時卡的令人發指