Windows11上にReact Native環境構築してAndroidアプリを作る

前提

完全に自分用の備忘録

• OS：Windows 11 Home

• Androidバージョン: 14

1. PowerShellで Chocolatey をインストール

• Windows専用のパッケージマネージャ
• 1個ずつ公式サイトから手動でダウンロードしてくるのは面倒だから使用
• 自動でパスが通るから楽

Set-ExecutionPolicy Bypass -Scope Process -Force; `
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; `
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

choco -v でバージョン確認

2. ChocolateyでNodejs、Python、OpenJDKをインストール

• nodejsとjdkは言わずもがな
• pythonはReact Nativeでは必須ではないらしい？ビルド補助ツールの一部として使われることがあるらしいので一応入れておく

choco install nodejs-lts -y
choco install python -y
choco install openjdk17 -y

確認

node -v
npm -v
python --version
java -version

3. Android Studio のインストールと設定

• 安定性を優先でちょっと古いがAndroid Studio Flamingo | 2022.2.1 Patch 2 May 24, 2023を選択
• https://developer.android.com/studio/archive からダウンロード

インストール後

• More ActionsからSDK Managerを選択
• Android 13.0(Tiramisu)にチェックを入れApply
  
• SDK Toolsタブを選択
• Hide Obsolete Packagesにチェックを入れる
• Android SDK Build-Tools36の33.0.3と30.0.2を選択
  
• Android EmulatorとAndroid SDK Platform-Toolsにチェックを入れApply
  

4.パスとANDROID_HOMEの設定

React Native、Android開発環境で必要な環境変数を設定

$path = [Environment]::GetEnvironmentVariable("Path", "User")
$path += ";$env:LOCALAPPDATA\Android\Sdk\platform-tools"
$path += ";$env:LOCALAPPDATA\Android\Sdk\emulator"
[Environment]::SetEnvironmentVariable("Path", $path, "User")
[Environment]::SetEnvironmentVariable("ANDROID_HOME", "$env:LOCALAPPDATA\Android\Sdk", "User")

確認

adb devices

何も出なくてOK

5.VSCodeの拡張機能設定

入れなくてもいいけど、入れたほうが絶対便利

• React Native Tools

6.React Nativeでプロジェクトの作成（TypeScript）

npx @react-native-community/cli@latest init <アプリ名> --template react-native-template-typescript@6.10.0

7.アプリ確認

yarn install
yarn start

別ターミナルを開いて

yarn android