Expo

Expo環境構築方法

はじめに

本記事ではExpoのテスト用プロジェクトを作成し、Expoをエミュレーターや実機で動かす方法を解説します。
作業前提として、AndroidエミュレーターやiOSシミュレータの設定が完了している前提で解説します。

Expoのテスト用プロジェクトを作成

コマンドプロンプトやターミナルで以下のコマンドを実行します。

次にコンソール上でどのテンプレートを利用するか確認されるので、最初に選択されている「blank」を選択し、Enterを押します。

スクリーンショット 2018-10-07 2.47.09.png

すると、TestProjectディレクトリにExpoで必要なファイル一式が作製されます。

Expoの起動

次にexpoへログインします。

コマンドライン上でユーザー名/パスワードが聞かれるので、入力してください。

「Success」と表示されたらログイン成功です。

そして、プロジェクトのディレクトリへ移動し、expo(開発サーバ)を起動します。

Androidエミュレータでの確認

Android StudioからAndroidエミュレーターを起動し、以下のコマンドを実行する。
exp androidコマンドは、Androidエミュレーター内にExpoクライアントのインストールを行い、Expoクライアントは開発サーバに接続します。

この時、Androidエミュレーター内でExpoクライアントが自動的に起動し、パーミッションを設定することが求められますので、「OK」を押し、パーミッションを有効にします。

スクリーンショット 2018-10-07 3.24.49.png

スクリーンショット 2018-10-07 3.27.09.png

「戻る」ボタンを押し、以下のような画面が表示されたら、Androidエミュレータの確認は完了です。

スクリーンショット 2018-10-07 3.31.34.png

iOSシミュレータでの確認

iOSシミュレータの起動は、xcodeを開かずに行うことができます。
プロジェクトのディレクトリ内で、次のコマンドを実行します。

ここでしばらく待つと、iOSシミュレーター内にExpoクライアントが自動的にインストールされ、Expoクライアントが自動的に読み込みを行います。
しばらくすると、以下のような画面が表示され、iOSシミュレーターでの確認は完了です。

スクリーンショット 2018-10-07 3.52.20.png

Androidの実機での確認

Google Playから「Expo」で検索して、Expoアプリをインストールします。
インストールしたら、exp startを実行した後に表示されるQRコードをスキャンするとアプリのロードが開始されます。

スクリーンショット 2018-10-07 3.01.57.png

上記Androidのエミュレーターと同じ画面が表示されればOKです。

以下のような画面が表示され、エラーとなった場合は同じローカルネットワークに接続されていないと考えられます。

その場合は、以下のコマンドでexpo(開発サーバ)を起動し、再度試してみてください。

これでもダメな場合は、セキュリティソフトがポート:19001をブロックしている可能性がありますので、セキュリティソフトの設定の見直しをしてみてください。

iOSの実機での確認

iOSのExpoアプリは、Androidと違ってQRコードで読み込む機能自体が廃止されています。そのため、exp sendというコマンドを使ってexpのURLを送信します。
exp sendの引数はiOS端末のメールアドレスか電話番号となります。電話番号で送る場合は、必ず+81と日本の国番号をつけてください。

SMSで受信すると、exp://から始まるURLが表示されるので、そのリンクをタップします。
すると、Expoアプリが起動します。

以上でExpoの環境構築、エミュレーターでの動確は完了です。