🐕

React Native + Expoで(Android,iOS)開発環境を構築する

4 min read

React Nativetとは

React Native(リアクト・ネイテイヴ)は、Facebookが作成したオープンソースのモバイルアプリケーションフレームワークです。開発者がネイティブプラットフォーム機能とともにReactを使用できるようにすることで、Android、iOSアプリケーションを開発するために使用されています。Web開発で用いられるReactをもとに開発をされているので、Web エンジニアでも学習コストが低いと言われています。

React Nativeのビルドや開発を支援してくれるサービスであるExpoを用いることで、簡単に開発環境が構築できます。

目標

実機、ios,android両シミュレータをローカルで立ち上げてコードを編集保存したら即時反映させる。


(実機でも確認)

事前準備

全体の流れ

1.Expoアカウントを登録
2.Xcodeインストール(ios準備)
3.JDKインストール(android準備)
4.Android Studioインストール(android準備)
5.実機にExpo Clientをインストール
6.Expo CLI をインストール
7.Expoプロジェクトの作成
8.Expo Developer Toolsを起動する

実機でのみ確認したい場合は上記2,3,4をスキップしてください。

動作環境

  • macOS Big Sur v11.5.2
  • node v14.15.0
  • npm v8.1.0

1.Expoアカウントを登録

公式アカウントでExpoアカウントを作成。

2.Xcodeインストール(ios準備)

ローカル環境でiso端末のシミュレータを起動させるためにXcodeが必要になります。
上記のリンクからアプリストアでXcodeをダウンロードします。

XcodeをインストールしたらCommand Line Toolsを設定する必要があります。
Xcodeを実行して上部のメニューでXcode > Preferences > Locationsを押して、
Command Line Toolsが設定されているか確認します。

3.JDKインストール(android準備)

React NativeでAndoridアプリを開発するために、JDK(Java Development Kit)をインストールします。

下記コマンドを実行してJDKをインストールします。

$ brew tap AdoptOpenJDK/openjdk
$ brew cask install adoptopenjdk/openjdk/adoptopenjdk8

インストールが完了したら下記コマンドを実行してインストールが出来たか確認します。

$ java -version
openjdk version "11.0.11" 2021-04-20
OpenJDK Runtime Environment AdoptOpenJDK-11.0.11+9 (build 11.0.11+9)
OpenJDK 64-Bit Server VM AdoptOpenJDK-11.0.11+9 (build 11.0.11+9, mixed mode)

JDKをインストールするとJavaのコンパイラーもインストールされます。
下記のコマンドでJavaのコンパイラーもインストールされたか確認します。

$ javac -version

下記のようにJavaのコンパイラーのバージョンが確認できます。

$ javac 11.0.11

4.Android Studioインストール(android準備)

下記リンクから Android Studio をダウンロード後、インストールします。
Android Studio

React Native アプリケーションを Android エミュレータで動作させるには、ADV(Android Virtual Device)をインストールする必要があります。
メニューの「Tools」 > 「AVD Manager」を開いて、任意の Android デバイス(ここでは「Pixel 2 API 30」)を追加してください。

「Actions」の「▶️(起動ボタン)」を押して、Android エミュレータを起動します。

Android SDK を PATH に追加するために、~/.zshrc(bashをお使いの方はbash_profile)を開いて、次の記述を追加してください。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

設定の変更を反映。

$ source ~/.zshrc

5.実機にExpo Clientをインストール

後ほど自分で作成したコードを実機で確認するためにアプリをインストールします。

ios

https://apps.apple.com/jp/app/expo-client/id982107779
android
https://play.google.com/store/apps/details?id=host.exp.exponent

6.Expo CLI をインストール

Expo CLIをインストールします。

$ npm install -g expo-cli
$ expo --version
4.12.1

7.Expoプロジェクトの作成

$ expo init <任意のプロジェクト名>


workflowについては、今回はTypeScriptを使用したかったためblank (TypeScript)を選択しました。(workflowについての公式ドキュメント)

8.Expo Developer Toolsを起動する

$ expo start

上記コマンドでExpo Developer Toolsがブラウザで立ち上がります。

繋がらない場合は、CONNECTIONをTunnelに変更してみてください。
画面左下のQRコードをExpoClientのQRリーダーで読み込むと、実機で動作確認ができます。
また実機のExpoClientでExpoのアカウントにログインしておくと、QRコード読み込まなくても開発中のアプリケーションが一覧に同期されます。

それぞれRun on iOS simulator,Run on Android device/emulatorを選択するとシミュレータが起動します。(IOS simulatorと違って、Androidでチェックしたい時は毎回Android Studioからエミュレータを起動して、expoからRunしないとダメなよう)

コードを編集して保存すると実機でもシミュレータでも即時反映されるかと思います。

参考にさせていただいた記事

ExpoでAndroidエミュレータが起動しない場合
ゼロから始める React Native + Expo 入門
Expo✕React Nativeの環境構築を行う【React Native入門】

Discussion

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