上周開始嘗試使用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搜索解決方案,而不要一開始就依賴一些快速上手類的文章。