🧑🏼‍💻技術ブログ

React Native 環境構築（Android編）

  1. TOP
    2. ›
  2. ReactNative
    3. ›
  3. React Native 環境構築（Android編）

すでに iOS編 が完了している前提。
iOS編同様、ReactNative公式手順 がきちんと整理されているため、これの通りに進めれば問題ない。

前提

  • 環境：Apple Silicon Mac（MacOS Monterey 12.5.1 / M1 Max）

Java Developer Kit インストール

homebrew/cask-versionsおよび zull11 をインストールする。
これらがすでに（brew経由で）インストール済みかは、以下のコマンドにて確認可能。

$ brew tap | grep "homebrew/cask-versions"
$ brew list | grep zulu11

まだインストールされていないのであれば、以下コマンドでインストール

$ brew tap homebrew/cask-versions
$ brew install --cask zulu11

zulu11 のインストール時に以下のようにパスワードを求められるので、これも入力する

$ Running installer for zulu11; your password may be necessary.
$ Package installers may write to any location; options such as `--appdir` are ignored.

homebrew/cask-versions とは

標準の homebrew/cask で公開されている以外のバージョンをインストールしたり、標準のバージョンと共存させるために必要なもの。（という理解で合っているのだろうか？）

zulu11 とは

Azul という会社が公開している Java Runtime Environment の名前が zulu であり、そのJavaのバージョンが 11 のものを指している。 つまり、端的に言えば Azul 社の公開している JRE のことである。

よく混同しやすいものに JRE と JDK があるが、これは以下のような違いがある。

short nameformal namethis is
JREJava Runtime EnvironmentJavaのアプリケーションを利用するために必要な実行環境
JDKJava Development KitJavaで開発を行うために必要なキット

Android Studio インストール

素直に 公式サイト からダウンロードする。
Apple Chip対応版もあるため、Apple Silicon Macを使用している場合はそれを選択する。

初期設定

Android Studio を起動すると インストールウィザード が開始される。

ReactNative公式手順では、このウィザードの中で以下の3種類のコンポーネントを漏らさず確実にインストールするように記載されているが、 Install Type で Standard を選択すると全て含まれるようになるため、それで進めていけば良い。
（Install Type で Custom を選択して手動で以下を追加する、ということはしなくて良い）

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

ウィザードの最後のステップにて、以下のようにインストールされるコンポーネントが一覧で確認できる。

Total Download Size:
1.85 GB

SDK Components to Download:
Android Emulator 265 MB
Android SDK Build-Tools 33 57.2 MB
Android SDK Platform 33 64.2 MB
Android SDK Platform-Tools 12.2 MB
Google APIs ARM 64 v8a System Image 1.41 GB
SDK Patch Applier v4 1.74 MB
Sources for Android 33 46.9 MB

Android SDK と Android SDK Platform は名前の通り表示されているため、インストール対象になっていることが一目瞭然である。しかし、 Android Virtual Device は Google APIs ARM 64 v8a System Image （Intel機の場合は Intel x86 Atom_64 System Image）という名称で表示されるため、一瞬「このままインストールを進めてしまうと Android Virtual Device は含まれないのでは？」と勘違いしてしまう点に注意。

ReactNativeが要求するバージョンの AndroidSDK をインストール

上記のウィザードが完了すると Welcome Android Studio ウィンドウが表示される。
そのウィンドウにて More Actions > SDK Manager をクリックして、以下の手順を進める。

SDK Platforms タブ

  • SDK Platforms タブを表示していることを確認
  • Android 12.0 (S) にチェックをつける
  • Show Pakcage Details にチェックを入れると Android 12.0 (S) の下に項目が増えるので、以下にチェックが入っている状態にする
    • Android SDK Platform 31
    • Google APIs ARM 64 v8a System Image

次に SDK Tools タブに移動して作業を進めるが、まだ OK や Apply は押さなくて良い。

SDK Tools タブ

  • SDK Tools タブに切り替える
  • Show Pakcage Details にチェックを入れると Android SDK Build-Tools 33 にぶら下がる項目が増えるので、以下にチェックが入っている状態にする
    • 31.0.0
  • ここまで完了したら、 Apply をクリックする
  • 確認ウィンドウが表示されるので OK をクリックする（ SDK Platforms / SDK Tools でチェックをつけたものがまとめてインストールされる）

Android SDK のパスを通す

.bash_profile に以下の3行を追記する。

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

エミュレータをセットアップする

ここまで進めると、 npx react-native run-ios で一応 ReactNative から Android エミュレータが起動できる状態となる。しかし、この状態で起動されるエミュレータは hvga(480x320) であり、使い物にならない。そのため、以下手順で明示的にエミュレータを作成する必要がある。

  • More Actions > Virtual Device Manager を表示
  • Create device をクリック
  • Choose a device definition: Pixel 6 を選択し、 Next をクリック（正直どれでも良いが、丁度良いのはこれだろう）
  • Select a system image: Release Name が S かつ API Level が 31 の行を選択し、Next をクリック
  • Verify Configuration: 特に何も変更せず、 Finish をクリック
  • Virtual Device Manager ウィンドウに戻るので、 作成したデバイスの Actions > ▶︎ をクリックし、 起動する

Androidエミュレータの起動

以下コマンドを実行し、Androidエミュレータを起動する。
（ iOS編 にて、すでにReactNativeプロジェクトを作成している前提）

$ npx react-native run-android

iTerm2 を使用している場合は以下のメッセージが表示されるため、OK をクリックする。
（iTerm2をさらに別ウィンドウで起動して良いかを聞いている）

Warning
OK to run “~/Develop/ReactNative-with-TypeScript/app/node_modules/react-native/scripts/launchPackager.command”?

また、続けて 以下のメッセージが表示されるため、これも OK をクリックする。

“iTerm.app”からマイクにアクセスしようとしています。
An application in iTerm2 wants to use your microphone.

上記が表示されるのは、 Androidが音声入力（所謂 OK, Google など）をエミュレートするためにマイクへのアクセスを要求しているためだと思われる。ターミナルソフトにマイク権限を明け渡すのはあまり気が進まないが、忘れた頃にここが原因で時間を浪費するのも嫌なので、やむを得ない。

これで先ほど設定した Pixel 6 のエミュレータが起動し、ReactNativeの初期画面が表示されれば環境構築は完了となる。

執筆日：
本記事のタグ