Expo CLI(旧create-react-native-app)を使ってnativeアプリ開発環境を時短構築│tech1000+

1 はじめに
2 準備
- 2.1 Expo CLI（ create-react-native-app）をインストールするために
- 2.2 react nativeのプロジェクトを作成する
3 作成したアプリを立ち上げてみる
4 デバイスでアプリを表示する
5 操作端末のネットワーク設定
6 さいごに
- 6.1 Share this:

はじめに

Webアプリケーションを触っているなら気になるのがiOSアプリの開発、Androidアプリの開発。ネイティブアプリの作成は少しハードルが高く感じてしまいますが、Expo CLI（元はcreate-react-native-app）を使えば特定のIDEを用意せずに、クロスコンパイルが可能なアプリを簡単に作ることができるということなので、まずはやってみました。

※この記事ではwindows10で行っています。

react nativeの開発環境は大きく２つ、この記事で使用するExpo CLIとnative CLIがあります。前者はnativeコードが使えない（全てjs）等制限があるのだが、大抵のことはExpoで事足りるようなのと、初心者には圧倒的にこちらのほうが楽ということなのでExpo CLIを使っていきます。

Expo CLIを使えば、Windows上でAndroidのエミュレータを動かしての確認と、実機のiPhoneがあればiOSでの確認の両方ができます。

Windowsでの「iOS simulator」は使えないというのにご注意。Xcodeの機能が必要になるためです。

※参考にさせていただいた記事
https://itblo9.com/expo-io/

準備

Expo CLI（ create-react-native-app）をインストールするために

まずは以下からnode.jsをインストール。
https://nodejs.org/ja/
react nativeのdocumentにはnode.jsのバージョンが10.0以上というように書いてあるので、ダウンロードするのはLTS版のほうで問題ないでしょう。
インストール時の選択肢はすべてデフォルトのままでOKです。

node.jsのインストールと同時にnpmというパッケージマネージャーが使えるようになるので、コマンドラインから以下コマンドを実行します。

npm i -g expo-cli

ツールのインストールが完了すると以下の表示がでます。
これでグローバルな領域でexpoコマンドが使えるようになります。

react nativeのプロジェクトを作成する

プロジェクトを作成したいディレクトリに移動し、以下コマンドを叩きます。
プロジェクト名は任意で、以下ではsample-react-nativeという名称にしました。

expo init sample-react-native

Choose a templateとテンプレートの選択を聞かれます。
テンプレートを使用しないのでblankで進めました。

プロジェクトの作成が完了すると、以下のメッセージが表示されます

Your project is ready at C:\sample-react-native
To get started, you can type:
  cd sample-react-native
  npm start

エラー発生時

git bashを使うと以下のエラーが発生しました。
windowsのpower shellを使うと問題なく進められました。

Input is required, but Expo CLI is in non-interactive mode.
--template: argument is required in non-interactive mode. Valid choices are: 'blank', 'tabs', 'bare-minimum' or any custom template (name of npm package).