【React Native】Expoで開発環境を構築し新規プロジェクトを作成する方法

React Native(リアクト・ネイティヴ)は、Facebookが作成したモバイルアプリ開発に利用できるオープンソースのフレームワーク。

そのReactNativeでは、アプリのビルド・デプロイ・更新などを簡単に行える環境で開発できる『Expo』というツールがあります。

今回は、そのExpoで開発環境を構築し、ReactNativeの新規プロジェクトを作成する方法となります。

【React Native】Expoで開発環境を構築し新規プロジェクトを作成する方法

今回の例では、Expoを利用するためにnpmパッケージの Expo CLIをインストールします。そのためNode.jsがインストールされている前提としています。

また、Node.jsは12以上でLTS(長期サポート)のバージョンが必要となります。

Node.jsをMacでインストール方法については、以下のリンク先を参考にしてみてください。

Expo CLIをインストール

まずは、以下のコマンドでグローバルのnpmにexpo-cliをインストールします。

npm install -g expo-cli

新規プロジェクトを作成

次にプロジェクトを作成するディレクトリに移動し、以下のコマンドで新規プロジェクトを作成します。

expo init SampleProject –template blank

例では、プロジェクトのディレクトリ名をSampleProjectとし、オプションでテンプレートをblankとしています。

開発環境のサーバーを起動

作成したプロジェクト内にはpackage.jsonファイルがあり、開発環境のサーバーを起動するnpm-scriptsなどが準備されています。

開発環境のサーバーを起動するには、package.jsonファイルがあるディレクトリに移動して、以下のnpm-scriptのコマンドを実行します。

npm start

それにより、開発環境のローカルサーバーが立ち上がり、そのサーバーにブラウザでアクセスするとExpoのデベロッパーツール画面が表示されます。

モバイル端末で開発中のアプリを確認する方法

Expoで開発しているアプリをモバイル端末で確認する方法は以下となります。

また、モバイル端末は、開発しているPC・Macと同じネットワークに接続する必要があります。

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

まずは、iOSまたはAndroidの端末に、以下のExpoクライアントアプリをインストールします。

QRコードを読み込み

ブラウザのExpoのデベロッパーツール画面や、上記npm-scriptを実行したシェルの画面には、QRコードが表示れていると思います。

そのQRコードを、Expoクライアントアプリをインストールした端末で読み込み、そのアプリでアクセスすることにより、開発しているアプリをモバイル端末で確認できます。

Expoでの開発の制限

Expoを利用した開発では、ネイティブコードのモジュールが利用できないなどの制約があります。そのため開発できるアプリには制限があります。

そのようなExpoの開発環境から、制約のないReactNativeの開発環境に移行する場合には、Expoのejectを実行する必要があります。

Expoのejectは以下のnpm-scriptのコマンドで実行でき、ネイティブコードをビルドできる開発環境に移行できます。

npm eject

また、一度ejectを行うとExpoを利用した開発環境に戻すことはできません。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。