2021年5月2日日曜日

ReactNativeでAndroidとPCの接続が切れたときは、adb reverseの実行で接続を復活可能


背景

ReactNativeとはjavascriptでスマホアプリを開発できるフレームワークです。
そのReactNativeでAndroid向けのアプリを実機で開発する際、ケーブルの接触不良などでUSB接続が切断されると、「Cannot connect to the Metro server.」と表示され、「react-native start」を実行しているPCのコマンド入力画面との連携が途切れ、コード変更時のホットリロードやログの出力ができなくなります。

「react-native run-android」を実行してアプリをインストールしなおすのが解決方法の1つですが、「接続の復活に底まで必要無いだろう」と思い、調べたらadbのreverseコマンド実行で接続復活できました。
備忘録を兼ねて、コマンドと参考リンクを共有します。

動作確認環境

PC: Ubuntu20.04
Android: Android6.0.1
react-native: 0.63.4(2020年12月公開版です。)

接続を復活させるadbコマンド

端末1台だけで開発を行っている場合は、下記のコマンドでコマンド入力画面とスマホの接続が復活します。
adb reverse tcp:8081 tcp:8081

接続は復活しますがホットリロードの復活まではしないので、「react-native start」を実行しているコマンド入力画面で「r」を入力して画面を再読込してください。
再読込後はホットリロードも復活します。

参考: Re-connect to metro server after disconnect

複数の端末やシミュレーター利用時は-sで端末を指定

adb管理下の端末が複数台あると、先ほど共有したadb reverseコマンドを実行すると下記のように複数台ある旨のエラーが表示されて接続を復活させれません。
adb: error: more than one device/emulator

この場合は、adbが認識している端末のidを -s オプションで指定すれば良いです。
各端末のidは下記のコマンドで確認できます。
adb devices
List of devices attached
063ece5bf0d1234 device
emulator-5554 device

上記の結果で表示された「063ece5bf0d1234」に対して、下記のコマンド実行により接続を復活させれます。
adb -s 063ece5bf0d1234 reverse tcp:8081 tcp:8081

参考: teocci/MultipleDevicesOverTCP.md

まとめ

adb reverseコマンドで端末とPCのtcp:8081を繋ぐことで、「react-native start」を実行したコマンド入力画面と端末の接続を復活させられました。
また、複数の端末がある場合は-sオプションで端末のidを指定すれば良いと分かりました。

ReactNativeでアプリ開発時にUSB接続が切れた際は、adb reverseコマンドを使えば環境復活までの時間を短縮できて便利だと思います。

0 件のコメント :