iOS
reactjs
reactnative
expo

Expo XDEでReact Native入門

More than 1 year has passed since last update.

はじめに

React Nativeで開発を始めるにあたっていくつか選択肢がありますが、今回はExpo XDEというReact Native用のXDEを使ってプロジェクトの作成を行います。

元記事

動作環境

  • mac Sierra Version 10.12.5
  • Expo XDE Version 2.19.3
  • Expo v19.0.0

Expo XDEで新規プロジェクト作成

Expoアカウントの作成

まずはアプリ開発用のアカウントを作成します。
Create your account

Githubアカウントでも作れます。このアカウントにアプリケーションを紐付けることでExpoコミュニティに公開することが出来ます。Apple Developerアカウントのようなものです。

Expoデスクトップアプリをインストール

デスクトップアプリはMac、Windows、Linux用が用意されています。

尚、デスクトップアプリでもシミュレーターは用意されていますが、実機でも動作確認したければExpoアプリを端末にインストールしてください。
Start your project with Expo XDE

インストールが完了したら自身のアカウントでサインインしてください。
expo.png

新規プロジェクト作成

ProjectアイコンからNew Projectを選択。
new-project.png

テンプレートを選択し、新規プロジェクトを任意の場所に作成します。今回はBlankで作成します。
create-project.png

ダウンロードが開始されます。(結構時間がかかります)

Expoの良いところはボイラーテンプレート(ベストプラクティスのようなもの)を予め初期環境として用意してくれるところです。

ただし、バージョンによって結構テンプレートが変わったりするので、古いリポジトリを扱う時は注意が必要です。

ダウンロードが完了すると、新規プロジェクト画面が開きます。
open-project.png

iOSシミュレーター起動

DeviceアイコンからiOS Simulatorを起動。

初回起動時はシミュレーターにExpoアプリがインストールされます。
simulator-expo-install.png

テンプレートアプリが起動します。
simulator-expo-exe.png

Command + Dでメニュー画面が開きます。
simulator-expo-menu.png

実機での動作確認

まずExpoアプリをインストールします。
さらに開発PCと端末を同ネットワークに接続する必要があります。

ShareアイコンをクリックするとQRコードが表示されるので、それをexpoアプリで読み込むと実機で動作確認することが出来ます。

デスクトップアプリでQRコードを表示。
qrcode.png

実機のアプリでQRコードを読み込む。
iphone-expo.png

デフォルトだと実機をシェイクするとメニュー画面が表示されます。
ジェスチャー設定を変える場合は、ProfileタブのOptionsから変更出来ます。

ここまでExpo XDEを使ったReact Nativeアプリの新規プロジェクトの手順を説明しましたが、環境やバージョンによってはエラーになる場合もあるので、ハマったら公式のissueをあたるか公式のブログなどを当たってみて下さい。