ExpoでReactNativeアプリの開発

ReactNative + Expo でアプリを開発する際の自分用のメモを残します。

Expo

ReactNativeでAndroidアプリやiOSアプリを作ると、ビルドやバージョン管理などの面倒くさい問題に遭遇します。
特に、ビルド時に出るエラーなどははまるものが多く時間を取られがちです。
expoはそういった開発者にとって面倒くさい問題を支援してくれる開発支援ツールです。

メリットは上記ですが、
デメリットは、expo管轄内で独自のネイティブモジュールを実装できないところです。
カメラや通知などを行うネイティブモジュールは用意されていますが、特殊な機能を実装したい場合は独自にネイティブモジュールを作る必要があります。
（例えば、以前作ったものですが、マイクの音声を数秒遅れてスピーカーでフィードバックするなどは独自にネイティブモジュールが必要です。）

独自のネイティブモジュールが必要な方はexpo detachで調べてみてください。

アプリ作成・起動

ドキュメントを読むと下記のコマンドでプロジェクトを作成できます。

# expo-cliをインストール
npm install --global expo-cli
# プロジェクト作成
expo init my-project

作ったら、動かしてみましょう。

# アプリ起動
expo start

上記のコマンドを打つと、ブラウザで下記のような画面が起動します。

この画面の「Run in web browser」を押すと、ブラウザ画面でアプリを見ることができます。

↓作成中のアプリ（ブラウザ表示）

Android Emulatorでアプリ起動

この段階でも簡単にアプリをエミュレータで確認できます。

エミュレータは、
AndroidStudio+Genymotionがオススメです。非常に軽く、開発しやすいです。

エミュレータを起動したら、ブラウザの「Run on Android device/emulator」ボタンを押すと、
エミュレータでアプリが起動します。

↓作成中のアプリ（エミュレータ表示）

便利ですね。

Android Deviceでアプリ起動

Playストアで「Expo」というアプリ（アイコン下記）

をインストールします。

アプリを起動し、「Scan QR Code」というボタンがあります。これを押します。

ブラウザに書かている2次元QRコードを読み取ると、アプリを実機で動かせます。

↓作成中のアプリ（端末表示）

非常に便利ですね。