Expo.io で React Native 開発環境を構築する〜macOS〜

Expoでアプリを開発する為には、ローカル開発ツール ( Expo CLI ) と開発中のアプリを確認する為の Expo クライアント or エミュレータが必要です。expo-cli をインストールした後、アプリを確認する為の環境を二つに分けて設定していきます。

Android エミュレート・iOS シミュレータ環境
Expoアプリ・Expo Client のインストールによるデバイス環境

現状・条件
ローカル開発ツールをインストールする
Android エミュレータ環境を設定する
1. Android Studio Emulator を設定します。
2. Android Studio Emulator で Expo アプリを起動します。
iOS シミュレータ環境を設定する
Expo アプリでデバッグ環境を設定する
1. Android / iOS 用 Expo アプリを実際のデバイスにインストールしておくと、開発中のアプリを各デバイスで確認できます。
2. Expo の Metro Bundler や CLI で表示されている QRコードを読み取ってアプリを起動できます。
あとがき

現状・条件

MacBook Pro / macOS Catalina 10.15.3
node@v12.14.1 / npm@6.13.4 ( by nodebrew )
expo-cli@3.11.9
Android Studio 3.5.3 for Mac
Xcode 11.3.1

ローカル開発ツールをインストールする

Expo CLI は CLI と GUI ツールを提供します。
インストール前に最新版の Node.js をインストールしてください。( Git を使用するなら同じくインストールを！)

npm install -g expo-cli でグローバル環境にインストールします。

try🐶everything ~$ mkdir ReactNative
try🐶everything ~$ cd ReactNative 
try🐶everything ReactNative$ npm install -g expo-cli
...
+ expo-cli@3.11.9
updated 1 package in 83.125s
try🐶everything ReactNative$

macOS の場合、一部 Watchman をインストールしないと問題になるので、ここからダウンロード＆インストールします。

Android エミュレータ環境を設定する

expo start コマンドを実行した後、a を押して Android エミュレータを起動できます。

何もせず、a を押すと ▼ のようにエラーになりますので、これから Android Studio Emulator を設定します。

Trying to open the project on Android…
Couldn’t start project on Android: Error running adb: No Android device found. Please connect a device and follow the instructions here to enable USB debugging:
https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select “Use custom Android SDK tools”, and point it at your Android SDK directory.

Expo Press ? to show a list of all available commands.

Android Studio Emulator を設定します。

Expo.io の Android Studio Emulator ガイドラインに沿って設定を行います。

Step 1
Android Studio 3.0+ をインストールします。

ここから最新の Mac 版をダウンドードしてインストールします。

▲ Android Studio 3.5.3
Step 2
Android SDK Build-Tools のインストールを確認する

Android Studio アプリを起動して、
「Preferences」＞「Appearance & Behavior」＞「System Settings」＞「Android SDK」＞「SDK Tools」をクリックします。
その後、「Android SDK Build-Tools」がインストール＆チェックされていることを確認します。

▲ Android SDK Build-Tools オプションを確認

Step 3

Android SDK の PATH を指定する

howto-expo-io-06 — ▲ Android SDK Location をコピーします。

コピーした Android SDK Location を自分のローカル PATH に指定します。macOS や Linux であれば、下記のコマンドを実行します。

try🐶everything ~$ echo "export ANDROID_SDK=/Users/myuser/Library/Android/sdk" >> ~/.bash_profile

macOS の場合、さらに下記のコマンドを実行してください。

try🐶everything ~$ echo "export PATH=/Users/myuser/Library/Android/sdk/platform-tools:$PATH" >> ~/.bash_profile

adb コマンドが下記のように実行できれば OK です。

try🐶everything ~$ source ~/.bash_profile
try🐶everything ~$ adb
Android Debug Bridge version 1.0.41
Version 29.0.5-5949299
Installed as /Users/rnuser/Library/Android/sdk/platform-tools/adb

global options:
 -a         listen on all network interfaces, not just localhost
 -d         use USB device (error if multiple devices connected)
 -e         use TCP/IP device (error if multiple TCP/IP devices available)
 -s SERIAL  use device with given serial (overrides $ANDROID_SERIAL)
 -t ID      use device with given transport id
 -H         name of adb server host [default=localhost]
 -P         port of adb server [default=5037]
 -L SOCKET  listen on given socket for adb server [default=tcp:localhost:5037]

general commands:
 devices [-l]             list connected devices (-l for long output)
 help                     show this help message
 version                  show version num
...

Step 4
仮想デバイスを設定する

Android Studio アプリを起動して、
「Tools」>「AVD Manager」をクリックするか、

Android Studio メイン画面の右上から、「Open AVD Manager」をクリックし、Android Virtual Device Manger を起動します。

+ Create Virtual Device… をクリックして、エミュレートするハードウェアの種類を選択します。さまざまなデバイスでテストすることを推奨されますが、まず、最新のデバイス ( Pixel ) を選択します。

ハードウェアを選択します。

▲ Pixel XLを追加します。

エミュレートするシステムイメージを選択＆インストールします。

▲ 必要な System Image を追加します。

System Image のダウンロードが完了したら、「Next」ボタンをクリックします。

▲ 他の追加したい System Image があれば「Download」リンクをクリックします。

必要に応じて AVD の属性を修正します。修正を終えたら「Finish」ボタンをクリックして仮装デバイスの追加作業を終了します。

また、追加したいハードウェアがあれば同じ手順で追加しましょう。

これから AVD Manager からプレイーボタンをクリックして該当デバイスを起動できます。

▲ Expo アプリをエミュレートする為にはこの仮装デバイスを事前に起動しておく必要があります。

Android Studio Emulator で Expo アプリを起動します。

expo init your-project & expo start を実行している状態で行います。

Metro Bundler から、
❶「CONNECTION」＞「Local」を選択、❷「Run on Android device/emulator」をクリックしてアプリを起動します。

Android エミュレータで Expo アプリをエミュレートする際の注意点

「Connection」を「local」にしないと真っ白な画面しか表示されません！

※ iOS Simulator では「Connection」の Tunnel、LAN、Local いずれも起動できます。

正常に起動した場合、下記のように表示されます。

iOS シミュレータ環境を設定する

expo start コマンドを実行した後、i を押して iOS シミュレータを起動できます。

何もせず、i を押すと ▼ のようにエラーになりますので、これから iOS Simulator を設定します。

Simulator not installed. Please visit https://developer.apple.com/xcode/download/ to download Xcode and the iOS simulator. If you already have the latest version of Xcode installed, you may have to run the command `sudo xcode-select -s /Applications/Xcode.app`.

Expo Press ? to show a list of all available commands.

※ iOS シミュレータは macOS 以外はインストールできません。

Step 1
最新の Xcode をインストールします。

OS を最新バージョンにアップデートしてから、App Store アプリを起動して Xcode をインストールします。
Step 2
Xcode Command Line Tools をインストールします。

Xcode アプリをオープンして、Xcode メニューから「Preferences…」を選択します。

Locations パネルへ移動し、Command Line Tools ドロップダウンから最新版のツールを選択＆インストールします。
Step 3
iOS シミュレータを起動します。

expo start コマンドを実行して次に i を押すか、Metro Bundler で「Run on iOS simulator」をクリックします。

※ エミュレータ ( シミュレータ ) のアプリを Reload したり、ファイルが変更すると自動でアプリをアップデートする Fast Refresh 機能を enable/disable するには、
iOS では ⌘+d を、Android は ⌘+m でメニューが表示されます。