🎃

React Native開発環境構築メモ（Windows＋Android）

に公開
Android
React Native
Windows
tech

Galaxy Z Fold7で遊ぶために、Windows PCにReact Nativeを用いたAndroidアプリ開発環境をゼロから構築した際のメモです。

1. JDK (Amazon Corretto 17) のインストール

# Winget での検索
winget search Corretto

# 見つかったパッケージをインストール（例: Amazon.Corretto.17.JDK）
winget install --id Amazon.Corretto.17.JDK -e

※ もし Amazon.Corretto.17 が見つからない場合は、Amazon.Corretto.17.JDK や Amazon.Corretto などの名前を検索して選ぶ。

環境変数を設定（PowerShell 管理者）

setx JAVA_HOME "C:\Program Files\Amazon Corretto\jdk17"

確認:

java -version

2. Node.js / npm のインストール

winget install --id OpenJS.NodeJS.LTS -e

確認:

node -v
npm -v

3. Android Studio & SDK のインストール

3-1. Android Studio のインストール

winget install --id Google.AndroidStudio -e

Android Studio を起動し、SDK Manager から以下をインストールします：

  • Android SDK Platform（最新）
  • Android SDK Build-Tools（最新）
  • NDK (Side by Side)
  • CMake（必要に応じて）

3-2. ANDROID_HOME の設定

setx ANDROID_HOME "C:\Users\<ユーザー名>\AppData\Local\Android\Sdk"

3-3. adb のパスを設定

adb を使うために、Platform-Tools ディレクトリを PATH に追加します。例：

setx PATH "%PATH%;C:\Users\<ユーザー名>\AppData\Local\Android\Sdk\platform-tools"

PowerShell を再起動し、以下で確認します：

adb --version

4. プロジェクトセットアップ

プロジェクトを新規作成するか、既存のリポジトリを利用します。

新規作成する場合

⚠️ プロジェクト名には英数字とアンダースコアのみを使用できます（Android のパッケージ名制約によるためハイフン不可）。

npx @react-native-community/cli init MyApp
cd MyApp

init コマンド実行時に依存パッケージが自動インストールされるので、npm install は不要です。

5. Metro バンドラー起動

npx react-native start --reset-cache

※このターミナルは開いたままにする

6. 物理端末を接続

  • Android 側で USB デバッグを有効化

  • 接続確認:

    adb devices

  • Metro 用にポートをリバース:

    adb reverse tcp:8081 tcp:8081
adb reverse --list

7. アプリをビルド & 実行

npx react-native run-android

Android 側に下記画面が表示されたらOK

8. 開発時の便利操作

  • Dev Menu: 端末をシェイク or adb shell input keyevent 82
  • 再読込: Dev Menu → Reload
  • Metro キャッシュクリア: npx react-native start --reset-cache

9. Metro を使わないテスト (Release ビルド)

cd android
./gradlew assembleRelease
adb install -r app\build\outputs\apk\release\app-release.apk

Discussion