はじめに
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をあたるか公式のブログなどを当たってみて下さい。