WSL から React Native を Android Studio で動かす

React Native というモバイルアプリを作るツールがあります。

そこで作ったアプリを Android Studio のエミュレータで動かすことができます。

React Native のプロジェクトを WSL2(Windows Subsystem for Linux 2) の内部に置くこともできるのですが、

やり方を調べても情報が古かったり日本語の記事が少なかったりうまくいってなかったりで結構苦労したので、ここにまとめたいと思います。

参考：React Native no Emulador Android Studio com WSL2 · GitHub

地球の反対側の人の投稿が大いに役に立ちました。笑

私の動作環境は次の通りです。

• Windows 10 Home バージョン 2004
• Android Studio Version 4.1.2
• WSL 2
• Ubuntu 20.04.1 LTS

[Windows] いろいろ設定

セキュリティの除外設定

Windows セキュリティのウイルスと脅威の防止 > ウイルスと脅威の防止の設定 > 除外から

Ubuntu のフォルダ（C:\Users\<username>\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_...）を除外します。

私のPCではこの項目が表示されていなかったので、レジストリエディタをいじって表示させて除外しました。

参考：Windowsセキュリティでウイルスと脅威の防止が表示されない。 - マイクロソフト コミュニティ

これをしないと WSL で起動した Metro と Windows 側の Android Studio が繋がらないようです。

インストールなど

Windows に Android Studio をインストールします。

Android Studio の設定は、基本的に公式の Windows + Android の説明に沿っていきます。

インストールした後に Configure > SDK Manager から選択して追加でインストールできるので、

Android SDK Platform 29と

Intel x86 Atom_64 System ImageまたはGoogle APIs Intel x86 Atom System Imageをチェック。

さらに SDK Tools タブに移ってAndroid Sdk Build-Tools > 29.0.2をチェックしてインストールします。

その後、Android SDK のパスを通します。

環境変数にC:\Users\<username>\AppData\Local\Android\Sdk\platform-toolsを追加します。

Android Studio では Configure > AVD Manager から Q API Level 29 image の仮想デバイスを作成しておきます。

  関連記事【Docker】Windows 10 Home で Docker をセットアップ

[WSL] インストールなど

基本的にはこの投稿の通りですが、若干古い部分があるので改めて書きます。

# ホームディレクトリに移動
$ cd

# unzip コマンドをインストール
~ $ sudo apt install unzip

# Linux 用 command line tools を入手する。
# 最新版は https://developer.android.com/studio#command-tools から確認できる。
~ $ wget https://dl.google.com/android/repository/commandlinetools-linux-6858069_latest.zip

# Android ディレクトリとして解凍する
~ $ unzip commandlinetools-linux-6858069_latest.zip -d Android

# zip を消す
~ $ rm -rf commandlinetools-linux-6858069_latest.zip

# JDK とエミュレータをインストール
# 9 以降だと tools.jar がないとかなんとかでエラーになるらしい
~ $ sudo apt install -y lib32z1 openjdk-8-jdk

# Java 確認
~ $ java -version

~ $ cd Android
# ディレクトリ構成変更
# こうしないと ./sdkmanager --install でコケる
# もともとは cmdline-tools/ の中にいろいろあるが、
# cmdline-tools/latest/ の中に移動する
~/Android $ mv cmdline-tools latest
~/Android $ mkdir cmdline-tools
~/Android $ mv latest cmdline-tools

~/Android $ cd cmdline-tools/latest/bin

# いろいろインストールする
# React Native の推奨が 29 だったので 29 を入れる
~/A/c/l/bin $ ./sdkmanager --install "platform-tools" "platforms;android-29" "build-tools;29.0.2"

# アップデート
~/A/c/l/bin $ sdkmanager --update

# Gradle をインストール
~/A/c/l/bin $ sudo apt install gradle

# Gradle 確認
~/A/c/l/bin $ gradle -v

ここからは元投稿に書いていなかったことです。

~/A/c/l/bin $ cd ~/Android

# sdkmanager によってフォルダができている
~/Android $ ls
build-tools  cmdline-tools  emulator  licenses  patcher  platform-tools  platform-tools-2  platforms  tools

~/Android $ cd platform-tools

# platform-tools の中に adb コマンドがある
~/A/platform-tools $ ls adb
adb

# adb を無効化する
~/A/platform-tools $ mv adb adb2

# 代わりに Windows 側の adb を使うようにシンボリックリンクを貼る
~/A/platform-tools $ ln -s /mnt/c/Users/<username>/AppData/Local/Android/Sdk/platform-tools/adb.exe adb

React Native が~/Android/platform-tools/adbを使うみたいで、

この設定をしないとsdkmanagerによって作られたadbを使ってしまい、react-native run-androidしたときにエラーになってしまいます。

Windows 側のadb.exeは Android Studio のものなので、これでつなげることができます。

つづいて環境変数を設定します。

これは、例えば fish を使用している場合はそれを呼び出している bash の.bashrcと fish の.config/fish/config.fishの両方に設定する必要があります。

~/.bashrc
1
export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
2
export PATH=$PATH:$JAVA_HOME/bin
3

4
export ANDROID_HOME=$HOME/Android
5
export PATH=$PATH:$ANDROID_HOME/emulator
6
export PATH=$PATH:$ANDROID_HOME/tools
7
export PATH=$PATH:$ANDROID_HOME/tools/bin
8
export PATH=$PATH:$ANDROID_HOME/platform-tools

~/.config/fish/config.fish
1
set JAVA_HOME /usr/lib/jvm/java-8-openjdk-amd64
2
set ANDROID_HOME $HOME/Android
3
set PATH $PATH $JAVA_HOME/bin $ANDROID_HOME/emulator $ANDROID_HOME/tools $ANDROID_HOME/tools/bin $ANDROID_HOME/platform-tools

プロジェクトを実行

まず、Android Studio から AVD を起動します。

AVD Manager で仮想デバイスの一覧が表示されるので、さきほど作成したものを緑色の三角ボタンで起動します。

次に PowerShell を立ち上げ、次のコマンドを打ちます。

adb kill-server
adb -a nodaemon server start

新たに WSL Ubuntu を開き、まだ React Native のプロジェクトを作成していない場合は作成します。

npx react-native init AwesomeProject
cd AwesomeProject

そして Metro を立ち上げます。

npx react-native start --host 127.0.0.1

新たに WSL Ubuntu を開き、プロジェクトのルートディレクトリ以下で次のコマンドを打ちます。

npx react-native run-android --variant=debug --deviceId emulator-5554

これでうまくいっていれば、Android Studio のエミュレータの表示が切り替わるはずです。

これで fish を使いながら開発できる！うれしい！

2回目以降は Android Studio の AVD 起動

→ PowerShell でadbコマンド

→ WSL で Metro 立ち上げ

→ WSL で run-android または Android Studio エミュレータでアプリ再起動

これだけで OK！

この記事がお役に立てれば幸いです。

ではまた