【ReactNative】Expoを使った環境構築

##概要
この記事は[React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応版
 ](https://www.udemy.com/course/react-native-first-step/)のUdemy講座を受けてのアウトプットです。

## Expo(エキスポ)とは
Expoは、ユニバーサルなReactアプリケーションのためのフレームワークとプラットフォームです。React Nativeとネイティブプラットフォームを中心に構築されたツールとサービスのセットで、同じJavaScript/TypeScriptのコードベースからiOS、Android、Webアプリの開発、ビルド、デプロイ、迅速なイテレーションを支援します。([Expo公式doc](https://docs.expo.io/)から引用)

##実行環境
- OS: Mac
- Node: v14.8.0
- Expo: 4.1.3
- Expo CLI: 4.1.3


##Expoのインストール
[Expo公式サイト](https://expo.io/)

Get Startedから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/846040/e37a7bf4-4cd8-a153-889a-e812b9b5d609.png)

nodeが入っている前提でExpoをインストール

```terminal
npm install --global expo-cli
```


[Expo公式サイト](https://expo.io/)の右上のSign Upからアカウントをつくる

```terminal
$ expo login
username/Email Address:先程登録したユーザネームかメールアドレス
Password: 先程登録したパスワード
```

[my-project]は自分が作るプロジェクトの名前

```
expo init [my-project]

//Expoのサポートで簡単に開発ができる
--- Managed workflow --- 

//真っ白の画面からスタート
blank                ...
blank(TypeScript)    ...

//３つのタブが用意された状態からスタート
tabs                 ...

//Expoなしに近いような状態でカスタマイズ性は高いがナイン度は少し上がる
--- Bare workflow ---
minimal               ...
minimal(TypeScript)   ...
```
作ったフォルダーに移動して

```
expo start
```

##iOSシュミレータのインストール

App storeから[Xcode](https://apps.apple.com/jp/app/xcode/id497799835?mt=12)をインストール


Prefenrences(⌘,)を開いてLocationsタブのCommand Line Toolsから最新バージョンを選ぶ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/846040/d41b8fd3-5648-c10f-7449-a2cca3e7aad2.png)

ExpoのDevTools UIの**Run on iOS simulator**をクリックするとiOSの実機が立ち上がります


## Androidシュミレーター

#### Android Studioのインストール
[android studio](https://developer.android.com/studio)

赤枠の"Android SDK Location"を覚えるかコピーしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/846040/5ab90f1e-4fc9-2e16-837a-4f7b23678c48.png)
(https://docs.expo.io/workflow/android-studio-emulator/?redirected#multiple--adb--versions-2 より引用)


#### Android SDKの場所を示す環境変数を追加
```terminal
[ -d "$HOME/Library/Android/sdk" ] && ANDROID_SDK=$HOME/Library/Android/sdk || ANDROID_SDK=$HOME/Android/Sdk
echo "export ANDROID_SDK=$ANDROID_SDK" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`
```

#### ~/.bash_profileにplatform-toolsを追加
```
echo "export PATH=$HOME/Library/Android/sdk/platform-tools:\$PATH" >> ~/`[[ $SHELL == *"zsh" ]] && echo '.zshenv' || echo '.bash_profile'`
```

```
//再起動
$ exit    ->   ターミナルを開く

//adbを実行できるか確認
$ adb
```

### Android Studioで設定

右下の"configure"をクリックして、"AVD Manager"を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/846040/5af96652-b6c6-04a0-ef82-c46a717ce98b.png)
>(https://docs.expo.io/workflow/android-studio-emulator/?redirected#multiple--adb--versions-2 より引用)

赤枠で囲っているボタンをクリックして新しいシュミレーターを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/846040/417a94cc-ca6f-7479-4e54-2e82e9f12fa9.png)(https://docs.expo.io/workflow/android-studio-emulator/?redirected#multiple--adb--versions-2 より引用)


手順
１．デバイスの選択。どれがいいかわからない場合はPixelの最新デバイスを選択してNextボタンで次へ

２．OSのバージョンの選択になるので、推奨タブにあるシステムイメージをダウンロードしてNexrボタンで次へ

３．finishをクリックして完成！

### 参考元
iOS Simulator
https://docs.expo.io/workflow/ios-simulator/?redirected

Android Studio
https://docs.expo.io/workflow/android-studio-emulator/?redirected#multiple--adb--versions-2