React Native&Expo開発環境構築

#React Native&Expo開発環境構築

備忘録:smiley:

###Expo会員登録をする
https://expo.io

###スマホにExpoアプリをインストール
Apple Storeからダウンロード
![Screenshot from 2019-08-02 17-30-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/815fd2ae-b05f-7a2f-e8af-63f70911eb59.png)

アプリを開いてProfileからExpo会員登録したアカウントでサインイン


###PCにて開発環境構築
npmとnodeが入っていれば以下のコマンドだけ

```bash
npm install expo-cli --global
```
<br>
###プロジェクト初期化
アプリ名がmyAppの場合、

```bash
expo init myAPP
```
とりあえずblankを選ぶ

```bash
~/Git/ReactNative_learning$ expo init myApp
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│   There is a new version of expo-cli available (3.0.6).     │
│   You are currently using expo-cli 3.0.4                    │
│   Run `npm install -g expo-cli` to get the latest version   │
│                                                             │
└─────────────────────────────────────────────────────────────┘
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank               minimal dependencies to run and an empty root component 
  blank (TypeScript)  same as blank but with TypeScript configuration 
  tabs                several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  bare-minimum        minimal setup for using unimodules 
```

tabキーで"name"へ移動して、myAppとか入力する（任意）

```bash
? Choose a template: expo-template-blank
? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ ‣ 100% completed
 {
   "expo": {
     "name": "myApp",
     "slug": "myApp"
   }
 }
```

yarnはとりあえずyesでインストールする。

```bash
? Choose a template: expo-template-blank
✔ Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ · 100% completed
? Yarn v1.13.0 found. Use Yarn to install dependencies? (Y/n) 
```

完了。myAppディレクトリに移動しyarn startでアプリケーションを立ち上げできる。

```bash

Your project is ready at /Git/ReactNative_learning/myApp

To get started, you can type:

  cd myApp
  yarn start
```

<strong>この時のPackage.json</strong>
React Native系のモジュールが入っている。

```json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-web": "^0.11.4"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0"
  },
  "private": true
}
```

<strong>作成されたプロジェクトのルートファイル</strong>
![Screenshot from 2019-08-02 14-42-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/49184be9-6318-c035-a745-dd2e95b2cea3.png)

<br>

###アプリのスタートの仕方
myApp配下でyarn startコマンド。以下のようにQRコードが表示される。
![Screenshot from 2019-08-02 15-14-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/912e5853-086a-75bf-14fc-c1cba2324778.png)

それをアイフォンのカメラをかざすだけ（撮影しなくていい）。アイフォン画面に「Expoで開く」とpop-upが出るのでそれをタッチするとExpoクライアントが開く。
![Screenshot from 2019-08-05 13-28-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/82e2b4ab-bf2e-9ff1-dff0-4459bbf97bbb.png)


初期画面↓
![EA8b20-UIAADfeK.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/9d4d6f2a-efb6-b710-89bc-4ef9a8b12730.jpeg)
:point_up:開発用PCとアイフォンは同じLANネットワークにいないとダメ

<br>
###UI用のモジュールReact Native Elementsをインストール
これはあくまでわたしの場合

```bash
npm install --save react-native-elements react-native-vector-icons
npm install --save react-navigation
npm install react-native-gesture-handler
npm install //ライブラリをインストールし直す
```


:point_up: 必要に応じてsudo をつけて
<br>