Expo XDEでReact Native入門

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

はじめに

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

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

新規プロジェクト作成

ProjectアイコンからNew Projectを選択。

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

ダウンロードが開始されます。(結構時間がかかります)
Expoの良いところはボイラーテンプレート(ベストプラクティスのようなもの)を予め初期環境として用意してくれるところです。
ただし、バージョンによって結構テンプレートが変わったりするので、古いリポジトリを扱う時は注意が必要です。

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

iOSシミュレーター起動

DeviceアイコンからiOS Simulatorを起動。
初回起動時はシミュレーターにExpoアプリがインストールされます。

テンプレートアプリが起動します。

Command + Dでメニュー画面が開きます。

実機での動作確認

まずExpoアプリをインストールします。
さらに開発PCと端末を同ネットワークに接続する必要があります。
ShareアイコンをクリックするとQRコードが表示されるので、それをexpoアプリで読み込むと実機で動作確認することが出来ます。

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

実機のアプリでQRコードを読み込む。

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

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

スポンサーリンク

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。