🚀
wslでReact Native開発環境を整える
手順
主に以下の手順
- wslインストール
- android studioインストール
- wslで各種設定
- React Native立ち上げ
wslインストール
公式が圧倒的にわかりやすいので、公式に従う
android studioインストール
wingetでインストール
powershell
~ $ winget install Google.AndroidStudio
Android SDK
Appearance & Behavior > System Settings > Android SDK
- Android SDK Location:
%userprofile%\Appdata\Local\Android\Sdkにする - SDK Platforms タブで以下をチェック
- Android 13.0 (Tiramisu) にチェック
- SDK Tools タブ で以下をチェック
- Android Sdk Build-Tools 34-rc2
- Android Sdk Command-line Tools
- Android Emulator
- Android Sdk Platform-Tools
- Intel x86 Emulator Accelerator (HAXM installer)
システムの環境変数
pathに%username%\AppData\Local\Android\Sdk\platform-toolsを追加
AVDの作成
Tiramisuで作成
wslで各種設定
JDK
下記を参考にjavaをインストール
unzip コマンドインストール
bash
~ $ sudo apt install unzip
Command line tools インストール
linuxを取得
bash
~ $ wget https://dl.google.com/android/repository/commandlinetools-linux-9477386_latest.zip
sdkmanager の設定
bash
# Android ディレクトリとして解凍する
~ $ unzip commandlinetools-linux-9477386_latest.zip -d Android
# zip削除
~ $ rm -rf commandlinetools-linux-9477386_latest.zip
~ $ cd Android
# ./sdkmanager --installできるように ディレクトリ構成変更
~/Android $ mv cmdline-tools latest
~/Android $ mkdir cmdline-tools
~/Android $ mv latest cmdline-tools
~/Android $ cd cmdline-tools/latest/bin
# いろいろインストール
~/A/c/l/bin $ ./sdkmanager --install "platform-tools" "platforms;android-33" "build-tools;33.0.0"
# アップデート
~/A/c/l/bin $ ./sdkmanager --update
~/A/c/l/bin $ cd ~/Android
# sdkmanager によってフォルダができている
~/Android $ ls
build-tools cmdline-tools emulator licenses patcher platform-tools 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
PATH設定
.bashrc
export ANDROID_HOME=$HOME/Android
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
React Native立ち上げ
watchmanをwslにインストール
Android Studio から AVD を起動
PowerShell で adb コマンド
powershell
~ $ adb kill-server
~ $ adb -a nodaemon server start
アプリケーションの作成
bash
~ $ npx react-native@latest init AwesomeProject
~ $ cd AwesomeProject
# Metro 起動
~ AwesomeProject $ npx react-native start --host 127.0.0.1
# android起動
~ AwesomeProject $ npx react-native run-android --variant=debug --deviceId emulator-5554
なんとか起動確認できた。。
Discussion