Closed3ヶ月前にクローズ3

WSL+ExpoでAndroidエミュレータを起動する

React Native

Expo

WSL

WSL 2

Kaz

Expoでネイティブアプリを開発したくなったので、エミュレータで起動する方法について調べた。
仕事ではWEB系しか触れないので、完全に無知な状態。

主にこちらの記事を参考にした。
内容に大きな差異は無いが、不足している部分も含めて整理し直す。OSはWindows11で、WSLではUbuntuを利用。

Kaz

 OpenJDK17をWSLでインストールsudo apt install openjdk-17-jdk -y

 Android Studioのダウンロード下のリンク先に記載されているWindowsのパッケージをダウンロードして実行。

https://developer.android.com/studio?hl=ja

 Windowsのシステム環境変数の設定Windowsの設定 → システム → バージョン情報 → システムの詳細設定 → 環境変数と移動して、システム環境変数に以下の設定を追加。

ANDROID_HOMEには、Android SDK Locationの値を設定するが、値はAndroid StudioのSDK Managerから確認可能。

PATHは既存の環境変数を編集して、それぞれ追加。
ANDROID_HOME：C:\Users\ユーザ名\AppData\Local\Android\Sdk
PATH：%ANDROID_HOME%\emulator、%ANDROID_HOME%\platform-tools

 コマンドラインツールのダウンロードWindowsのパッケージをダウンロードしたリンク先に記載されているLinuxのコマンドラインツールをWSLでダウンロード。
# unzip が無ければインストール
sudo apt install unzip

# コマンドラインツールをダウンロード(URLはダウンロードページのリンクをコピー)
wget https://dl.google.com/android/repository/commandlinetools-win-13114758_latest.zip

unzip commandlinetools-linux-13114758_latest.zip -d android_sdk

# コマンドラインツールを環境変数に追加
echo -e '\nexport ANDROID_HOME=$HOME/android_sdk' >> ~/.bashrc

export PATH=$PATH:$HOME/android_sdk/cmdline-tools/latest/bin && source ~/.bashrc

# ダウンロードしたディレクトリで、cmdline-toolsとbinの間にlatestディレクトリを挟むようにする
# 理由はよく分からないが、デフォルトのままだとlatest無しでダウンロードされ、sdkmanagerを実行する際にエラーになる
mkdir android_sdk/cmdline-tools/latest
mv android_sdk/cmdline-tools/bin android_sdk/cmdline-tools/latest

# SDK Managerで必要なパッケージをインストール
sdkmanager --install "platform-tools" "platforms;android-34" "build-tools;34.0.0"

# 既存のadbは一旦退避
mv android_sdk/platform-tools/adb android_sdk/platform-tools/adb2

# Windows側のadbを利用するようにシンボリックリンクを作成
ln -s /mnt/c/Users/ユーザー名/AppData/Local/Android/Sdk/platform-tools/adb.exe adb

# 追加で環境変数を設定
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$PATH

 Android Studioでエミュレータを起動Android StudioのVirtual Device Managerに移動して適当にエミュレータを起動しておく。

 ExpoのプロジェクトでビルドWSL上のプロジェクトで以下のようなコマンドを実行して、ビルドを行い実行。
npx expo run:android
メモリが足りないのか、負荷が高いのかWSLとの接続が切れる…

Kaz

REACT_NATIVE_PACKAGER_HOSTNAME を設定していなかったためか、エミュレータで failed to connect と表示されたので、環境変数を設定した。
また、Medium Phoneであれば、問題なくエミュレータに接続することができた（若干重い気もするが）。

export REACT_NATIVE_PACKAGER_HOSTNAME=$(ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}')

このスクラップは3ヶ月前にクローズされました