關(guān)于React Native安卓應(yīng)用調(diào)試,我遇到的那些坑

上周開始嘗試使用React Native開發(fā)app,在安卓調(diào)試環(huán)境上踩了不少坑,花費(fèi)了不少時間。在這里總結(jié)一下,希望大家見到同樣那些坑之后可以繞道而行。

首先說明,我是在Mac上進(jìn)行開發(fā)和調(diào)試的,因此使用其他系統(tǒng)的同學(xué)們參考時請自行斟酌。

1)關(guān)于Android虛擬機(jī)的選擇

RN官方推薦Genymotion,也確實(shí)比較好用,不過,我遇到的第一個坑也是從此開始的。在創(chuàng)建虛擬機(jī)時,建議你目前不要采用Preview版本的Nexus 5X和6P,其中存在一些bug會導(dǎo)致調(diào)試報錯,我花了一天多的時間都沒搞定,后來選擇Nexus 5的穩(wěn)定版本后非常順利就通過了。

安卓官方的虛擬機(jī)也是可以選擇的,只是界面有點(diǎn)兒簡陋,我沒有找到如何縮放虛擬機(jī)界面的解決辦法,所以放棄了。

2)調(diào)試中的界面刷新問題

使用RN開發(fā)的一大優(yōu)勢就是修改app中的Javascript代碼時無需重新編譯應(yīng)用,但是在Genymotion虛擬機(jī)中,按照官方的提示按 Command+M 卻無法喚出開發(fā)菜單,這個在Genymotion中的解決辦法是:按照如下圖所示,拖動虛擬機(jī)右側(cè)的功能分隔線,讓幾個操作按鈕出現(xiàn)在虛擬機(jī)右側(cè),這時再按 Command+M 即可順利喚出開發(fā)菜單


我在使用安卓官方的虛擬機(jī)時也遇到了刷新的問題,按F2鍵無法喚出開發(fā)菜單,不過通過命令行輸入:adb shell input keyevent 82 還是可以解決這個問題。

3)安卓真機(jī)調(diào)試中遇到的問題

真機(jī)調(diào)試其實(shí)挺簡單,首先用USB線將手機(jī)與電腦連接,并確保手機(jī)的usb調(diào)試選項打開,此時在項目根目錄下運(yùn)行:react-native run-android,即可在手機(jī)上進(jìn)行調(diào)試。只要晃動手機(jī),即可打開開發(fā)者菜單。

如果需要通過Wifi連接開發(fā)服務(wù)器,調(diào)試時很常見會遇到“Unable to download JS bundle”的錯誤,這時的解決辦法是:

首先確保手機(jī)和電腦在同一wifi環(huán)境下

在程序主界面,晃動手機(jī),點(diǎn)擊dev settings

點(diǎn)擊最后一項:Debug server host for device

在其中設(shè)置電腦的IP和端口,比如 192.168.1.101:8081,然后重新加載JS

還有人給出了一些其他的解決方案,不過我沒有用上。

http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle

4)關(guān)于8081端口占用的問題

如果你同時開發(fā)安卓和iOS應(yīng)用,或者有時在不同的應(yīng)用之間進(jìn)行切換,編譯時可能會遇到端口8081被占用的問題,這時可以運(yùn)行:lsof -n -i4TCP:8081,檢查端口的使用情況,必要時可以通過:kill -9 <端口號>,殺死當(dāng)前占用8081端口的進(jìn)程。

先寫這么多,想到其他的再更新。另外我建議在操作時盡量參考React Native官方的文檔及比較標(biāo)準(zhǔn)的中文翻譯,按部就班的進(jìn)行,遇到問題再Google搜索解決方案,而不要一開始就依賴一些快速上手類的文章。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • 盡管在移動開發(fā)中,原生APP的開發(fā)成本很高,但現(xiàn)階段基于原生開發(fā)仍然是必須的,因?yàn)閃eb的用戶體驗(yàn)仍無法超越Nat...
    奔跑的大橙子閱讀 5,418評論 0 11
  • 2014年6月28日,我們畢業(yè)了。行李走快遞,肩上背著一個書包,簡單地離開了生活了四年的小城。分別的時候,嘴上說著...
    愛吃魚的木心閱讀 304評論 0 1
  • 這個故事發(fā)生在阿富汗,阿米爾生性懦弱,卻一直希望能得到父親的關(guān)愛,然而等到阿富汗爆發(fā)戰(zhàn)爭,他們到達(dá)美國后他才享受到...
    西瓜的瓜gua閱讀 200評論 2 4
  • 好對不起自己!從沒讓那些不看好自己的人后悔?
    常小識閱讀 606評論 0 0