はじめに

今回はExpo cliを使ってReact Nativeの環境構築を行っていきます。
環境構築のゴールはシミュレーターに"Open up App.js to start working on your app!"と出ることです。

目次

1.Node.jsをインストール
2.シュミレーターをインストール
3.Expoでプロジェクト作成
4.プロジェクトを起動

1. Node.jsをインストール

Node.jsのパッケージ管理システムであるnpmでExpo cliをインストールするので、ローカル環境にNode.jsが入っていない人はインストールしてください。
Node.js公式

2. シュミレーターをインストール

スマホアプリを作るにはシュミレーターもインストールする必要があります。
IOSアプリ開発の場合は、「Xcode」（Macユーザーのみ）
Androidアプリ開発の場合は、「Android Studio」

Xcodeの設定

MacユーザーはApp StoreでXcodeをダウンロードし、Xcode->PreferenceからCommand Line Toolsを選択してください。

そして、Componentsから一番最新のSimulatorをインストールしてください。
ここでXcodeの設定は完了です。

Android Studioの設定

Android Studioを起動し、⚙ConfigureからSDK Managerを選択し、以下の写真のようにパッケージが選択してあれば大丈夫です。

Windowsユーザーはここで設定完了です。以下からはMacユーザーだけの追加設定をしていきます。

pathの設定（Macのみ）

ターミナルを開いて、以下のコマンド入力します。

cd ~/.bash_profile

次に、Android StudioのSDK ManagerのAndroid SDK Locationに書かれているpathを以下のようにコマンドする。

.bash_profile

export ANDROID_SDK=/Users/kajigaya/Library/Android/sdk
export PATH=/Users/kajigaya/Library/Android/sdk/platform-tools:$PATH

最後に、.bash_profileに追加したpathを.zshrcを開いて、コピペする。

Macユーザーのpath設定

AVD Managerの設定

Android studioの⚙ConfigureからAVD Managerを選択し、+Create Virtual Deviceを選択します。
使用したいハードウェアを選択し、Q Downloadでダウンロードを開始し、完了です。
(使用するときは、使いたいハードウェアの▶️ボタンを押します)

3. expoでプロジェクト作成

今回は、ディスクトップにプロジェクトを作成したいので、ディスクトップに移動し、npmでexpoをインストールします。

cd ~/Desktop

Desktop

npm install -g expo-cli

expoをインストール完了したら、expoでプロジェクトを作成します。

Desktop

expo init プロジェクト名

インストール中、いろいろと選択する必要がありますが、基本的にEnterで構いません。

4.プロジェクトを起動

まず、作成したプロジェクトに移動します。そこでプロジェクトを立ち上げます。

プロジェクト名

cd ~/Desktop/プロジェクト名
npm start

ブラウザが立ち上がり、Run on iOS simulatorを選択します。

このような画面が立ち上がれば環境構築完了です。
お疲れ様でした。

参考資料

React Native公式
 Expo公式 MacユーザーのためAndroid Studioの設定
 Android Studio公式　Android Studioのインストール方法