Works by

Ren's blog

@rennnosuke_rk 技術ブログです

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

f:id:rennnosukesann:20181231224202p:plain:w500

あけましておめでとうございます。新年一発目の記事です。
今年もやっていきましょう。

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

Expoとは

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 
  tabs
  several example screens and tabs using react-navigation 

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

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.

  exp://192.168.11.10:19000

`````
ここにQRコードが表示される
`````
  
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が開きます。このコンソール上ではアプリのログが表示されます。

f:id:rennnosukesann:20190831102958p:plain

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

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

f:id:rennnosukesann:20181231233914j:plain:w300

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

f:id:rennnosukesann:20181231222727:plain:w300


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

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

まだExpoに関しては未知の部分も多いので、ちょくちょく遊んでみようかなと思いました。

参考文献

Introduction - Expo Documentation