ReactNative+Expoの実機動作まで

2021/11/30に公開約2,000字

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」と検索してインストールします。

https://play.google.com/store/apps/details?id=host.exp.exponent

Expoアプリを開くと以下のような画面になっていますのでScan QR Codeをタップします。

これで実機に開発中のアプリが表示されたら完了です。

macOSでエラーが出る場合

macOSを利用している場合はwatchmanのインストールしないとエラーとなる可能性があります。
Homebrewがインストールされている場合は以下のコマンドでインストールできます。

brew update
brew install watchman

まとめ

思ったよりもサクッと導入できました。
筆者の環境では既にAndroid Studioやadbが導入済みだったので、導入されていない場合はその辺りで追加の手順が必要となる可能性があります。

Discussion

ログインするとコメントできます