Works by

Ren's blog


【React Native】Expo CLIを利用してReact Nativeプロジェクトを作成する



今回はバックエンドAPIのドライバとしてクライアントアプリ(React Native)を作るためにExpoを使ったので、備忘録も兼ねてExpo CLIの紹介をしようと思います。


ExpoはReact Nativeによるクロスプラットフォームアプリ開発の支援サービスです。React Nativeのプロジェクト作成・ビルド・デプロイを容易にするCLIや、React Native上での認証等のロジック・カメラビューなどのUIコンポーネントの実装を簡単にしてくれるSDKなどを提供してくれます。

今回はExpo CLIを使用して、簡単に便利なReact Native環境を構築します。

Expo CLIのインストール

はじめにglobal環境上にnpm(またはyarn)を使用して expo-cli をインストールします。

$ npm instal -g expo-cli
$ yarn add global expo-cli

余談ですが、 npm でインストールするときに以下ようなエラーが出てインストールできない場合があります。この場合、 sudo をつけることでインストール可能になります(rootlessのせい?)。

npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

Expo CLIによるReact Nativeプロジェクトの作成

インストールが完了したら、以下のコマンドでReact Nativeプロジェクトが作成できます。 my-app の部分は好みのプロジェクト名に変更してください。

$ expo init my-app


プロジェクト内のアプリテンプレートをどうするか聞かれますが、今回はサンプルのない状態から始めるので blank を選択しEnter。

? Choose a template: 
❯ blank
  minimum dependencies to run and an empty root component 
  several example screens and tabs using react-navigation 

これだけです! これでReact Native(+Expo)プロジェクトの作成が開始されます。


作成したプロジェクトルート上で npm start または yarn start を実行すると、アプリがローカルサーバ上で起動します。

$ yarn start
yarn run v1.7.0
$ expo start
[23:00:35] Starting project at /Users/aa367417/IBMProj/Kyoritu/Project/react_native/owner-client
[23:00:37] Expo DevTools is running at http://localhost:19002
[23:00:37] Opening DevTools in the browser... (press shift-d to disable)
[23:00:47] Starting Metro Bundler on port 19001.
[23:00:49] Tunnel ready.


To run the app with live reloading, choose one of:
  • Sign in as @rk9902 in Expo Client on Android or iOS. Your projects will automatically appear in the "Projects" tab.
  • Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
  • Press a for Android emulator, or i for iOS simulator.
  • Press e to send a link to your phone with email/SMS.

Press ? to show a list of all available commands.
Logs for your project will appear below. Press Ctrl+C to exit.

アプリが起動すると同時にブラウザが開き、Expo Developer Toolが開きます。このコンソール上ではアプリのログが表示されます。


Expo Developer Tool上または npm start yarn start を実行したコンソール上のQRコードをモバイル端末でスキャンすると、端末上でアプリが起動します。

・・・が、その前にアプリの起動に必要なExpo Clientアプリを端末にインストールする必要があります。iOSであればApple StoreAndroidであればGoogle Play Storeからインストールしてください。


Expo Clientを端末にインストールしてからQRコードをスキャンすると、以下のように初期状態のExporプロジェクトのアプリが起動できます。


ものの5分でプロジェクトが作成+アプリのローカル起動ができました。 QRですぐ端末上でデバッグできるのがいいですね!

以前は create-react-native-app でExpoプロジェクト作成できたのに、なぜか作成できなくなってたので、新しく expo-cli をインストールしました。



Introduction - Expo Documentation