ReactNative+Expoの実機動作まで
ReactNative+Expoの実機動作まで
公式：https://docs.expo.dev/get-started/installation/
概要
ReactNative + TypeScript + Expoの環境構築になります。
Androidの実機で動作させるまでを記載します。
前提としてLTSのNode.jsがインストールされているものとします。
Expoのインストール
ExpoのCLIをインストールします。
npmの場合は以下のコマンドを実行。
npm install -g expo-cli
yarnの場合は以下のコマンドを実行。
yarn global add expo-cli
インストールが正常に完了したか確認するため、バージョンを表示。
expo --version
この記事の執筆時点では4.13.0と表示されました。
プロジェクトの作成
続いて以下のコマンドでプロジェクトを作成します。
※my-appの部分は自身のアプリ名で置き換えてください。
expo init my-app
実行すると以下のような選択肢が表示されます。
今回はTypeScriptを使用し、Expoの恩恵を受けたいためblank (TypeScript)を選択します。
※選択肢は矢印キーで選択し、エンターキーで決定します。
? Choose a template: » - Use arrow-keys. Return to submit.
----- Managed workflow -----
blank a minimal app as clean as an empty canvas
> blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
以下の出力がされたら環境構築は完了です。
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following yarn commands.
- cd my-weather-app
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios # requires an iOS device or macOS for access to an iOS simulator
- yarn web
Android実機で動作確認する
作成したプロジェクトのルートディレクトリで以下のコマンドを実行します。
yarn start
するとコンソールにQRコードが出力されますので、Expoアプリで読み取ります。
Expoアプリがインストールされていない場合は以下を開くか、Playストアで「Expo」と検索してインストールします。
Expoアプリを開くと以下のような画面になっていますのでScan QR Codeをタップします。
これで実機に開発中のアプリが表示されたら完了です。
macOSでエラーが出る場合
macOSを利用している場合はwatchmanのインストールしないとエラーとなる可能性があります。
Homebrewがインストールされている場合は以下のコマンドでインストールできます。
brew update
brew install watchman
まとめ
思ったよりもサクッと導入できました。
筆者の環境では既にAndroid Studioやadbが導入済みだったので、導入されていない場合はその辺りで追加の手順が必要となる可能性があります。
Discussion