【React Native】Expo CLIを利用してReact Nativeプロジェクトを作成する
あけましておめでとうございます。新年一発目の記事です。
今年もやっていきましょう。
今回はバックエンド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が開きます。このコンソール上ではアプリのログが表示されます。
Expo Developer Tool上または npm start
yarn start
を実行したコンソール上のQRコードをモバイル端末でスキャンすると、端末上でアプリが起動します。
・・・が、その前にアプリの起動に必要なExpo Clientアプリを端末にインストールする必要があります。iOSであればApple Store、AndroidであればGoogle Play Storeからインストールしてください。
Expo Clientを端末にインストールしてからQRコードをスキャンすると、以下のように初期状態のExporプロジェクトのアプリが起動できます。
ものの5分でプロジェクトが作成+アプリのローカル起動ができました。 QRですぐ端末上でデバッグできるのがいいですね!
以前は create-react-native-app
でExpoプロジェクト作成できたのに、なぜか作成できなくなってたので、新しく expo-cli
をインストールしました。
まだExpoに関しては未知の部分も多いので、ちょくちょく遊んでみようかなと思いました。