RN:Android裝置透過wifi/ethernet連線開發APP

RN官網上有寫到透過usb線開發,是使用adb reverse來完成的。但是透過wifi/ethernet連線的開發方式我是有看沒有懂,所以這裡簡短紀錄一下確認過的做法。

透過wifi/ethernet連線開發APP

首先當然,你要知道android裝置要可以透過wifi/ethernet連線功能;如無法確定,一般都是用usb,如果你的裝置只能usb就請參考官網的解說就好。

0. 將android裝置連線到同一個wifi/ethernet

因為要透過wifi/ethernet,所以要把開發電腦跟android裝置連線到同一個wifi/ethernet,然後到android的wifi網路設定點詳細看一下IP位址。

1. 連線到該裝置

我的目標裝置IP是192.168.1.101,adb的埠號5555。

adb connect 192.168.1.101:5555

2. 確認可進入該裝置

adb shell

若你的電腦有多個adb device,要改用
adb -s 192.168.1.101:5555 shell

若成功後請輸入exit離開該裝置

如果顯示的是無法連到斷線的裝置,表示你的電腦或網路有阻擋連線,請確認已經把adb加入到防火牆白名單

2.1 開啟Win10預設Defender防火嗆

若你的電腦使用Window10預設的Defender,請前往設定>搜尋框輸入"防火牆">選取"允許應用程式透過Windows Defender防火牆通訊">點擊變更設定

找到adb.exe執行檔加入白名單

3. 啟動你的RN應用程式

npm run android

這時你的APP應該會被RN工具裝到你的Android裝置上,並被叫起。不過這時候畫面應該是顯示無法載入bundle。

4. 啟動RN的開發選項並輸入電腦IP及埠號

adb shell input keyevent 82

接著點選進入Dev Settings,點選Debug server host for device。

上面輸入的82其實就是KEYCODE_MENU,可以叫起RN開發選項。

接著在android裝置上輸入你電腦IP和埠號(以我電腦為例是192.168.1.115:8081)。如果你的android裝置不好輸入文字,可以用adb shell input來輸入文字,舉例如下:

adb shell input text 192.168.1.115:8081

5. 再次啟動RN開發者選項,選Reload

大功告成,你會看到RN APP連線到你電腦並呈現在目標裝置上。


留言