LoginSignup
1
0

More than 3 years have passed since last update.

ExpoでReactNativeアプリの開発

Posted at

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

Expo

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

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

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

アプリ作成・起動

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

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

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

# アプリ起動
expo start

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

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

↓作成中のアプリ(ブラウザ表示)
screenshot4.png

Android Emulatorでアプリ起動

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

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

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

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

screenshot3.png

便利ですね。

Android Deviceでアプリ起動

Playストアで「Expo」というアプリ(アイコン下記)
screenshot2.png
をインストールします。

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

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

↓作成中のアプリ(端末表示)

Screenshot_20200510-182628.jpg

非常に便利ですね。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0