Expo CLIで新規プロジェクト構築

Expo CLIを利用したプロジェクト環境構築方法を確認します。環境構築後、シミュレータでの動作確認、実機端末での動作確認まで行います。

Expo CLIをインストール

expo-cliをインストールします。

$ npm install expo-cli --global

インストールできました。

$ expo --version
3.0.6

新規プロジェクト構築

template選択

$ expo init
? Choose a template:
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

初期設定を入力

$ expo init
? 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": "wakuwaku-expo-sample",
     "slug": "wakuwaku-expo-sample"
   }
 }

パッケージインストール

$ expo init
? 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? Yes

  (省略)

To get started, you can type:

  cd wakuwaku-expo-sample
  yarn start

ビルド & 動作確認

expo start

$ cd wakuwaku-expo-sample/
$ yarn start
yarn run v1.13.0
$ expo start
Starting project at /react_native_expo/wakuwaku-expo-sample
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19001.
Tunnel ready.

  exp://10.0.1.2:19000

( QR codeが表示されます [省略] )

  To run the app with live reloading, choose one of:
  • Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
  • Press a for Android emulator, or i for iOS simulator.
  • Press e to send a link to your phone with email.
  • Press s to sign in and enable more options.

Press ? to show a list of all available commands.
Logs for your project will appear below. Press Ctrl+C to exit.
705-react-native-expo-cli-new-project_browser.png

自動でブラウザが開き、動作確認を進めることができます。

iOS simulatorで確認

https://docs.expo.io/versions/v34.0.0/workflow/ios-simulator/ を参考に iOS simulator を利用できるようにしておきます。

705-react-native-expo-cli-new-project_ios.png

ブラウザ上のRun on iOS simulatorをクリックすると、iOS simulator上で動作確認ができます。

⌘ + Dで設定画面を開けます。

Android emulatorで確認

https://docs.expo.io/versions/v34.0.0/workflow/android-studio-emulator/ を参考に Android emulator を利用できるようにしておきます。

705-react-native-expo-cli-new-project_android_studio.png

Android Studioで適当にプロジェクトを作成して、仮想デバイスを起動しておきます。

705-react-native-expo-cli-new-project_android.png

ブラウザ上のRun on Android device/emulatorをクリックすると、Android emulator上で動作確認ができます。

実機端末で確認

同一LAN上に接続している iPhone で動作確認します。事前にiPhone上で Expo Client をインストールしておきます。

705-react-native-expo-cli-new-project_device1.png

iPhoneのカメラでブラウザに表示されたQRコードを認識させます。すると、上部にExpoで開くと表示されます。

705-react-native-expo-cli-new-project_device2.jpeg

実機でも動作確認できました。

フォルダ構成確認

expo init で生成したプロジェクトのフォルダ構成を確認します。

template > blankの場合

フォルダ構成

.
├── .expo/
├── .expo-shared/
├── assets/
├── node_modules/
├── .gitignore
├── .watchmanconfig
├── App.js
├── app.json
├── babel.config.js
├── package.json
└── yarn.lock

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

package.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
}

template > blank (TypeScript)の場合

フォルダ構成

.
├── .expo/
├── .expo-shared/
├── assets/
├── node_modules/
├── .gitignore
├── .watchmanconfig
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
├── tsconfig.json
└── yarn.lock

package.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": {
    "@types/react": "^16.8.23",
    "@types/react-native": "^0.57.65",
    "babel-preset-expo": "^6.0.0",
    "typescript": "^3.4.5"
  },
  "private": true
}

template > tabsの場合

フォルダ構成

.
├── .expo/
├── .expo-shared/
├── __tests__/
├── assets/
├── components/
│  ├── __tests__/
│  ├── StyledText.js
│  └── TabBarIcon.js
├── constants/
│  ├── Colors.js
│  └── Layout.js
├── navigation/
│  ├── AppNavigator.js
│  ├── AppNavigator.web.js
│  └── MainTabNavigator.js
├── node_modules/
├── screens/
│  ├── HomeScreen.js
│  ├── LinksScreen.js
│  └── SettingsScreen.js
├── .gitignore
├── .watchmanconfig
├── App.js
├── app.json
├── babel.config.js
├── package.json
└── yarn.lock

package.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",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "~3.0.3",
    "@expo/vector-icons": "^10.0.3",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "expo": "^34.0.1",
    "expo-asset": "^6.0.0",
    "expo-constants": "6.0.0",
    "expo-font": "~6.0.0",
    "expo-web-browser": "6.0.0",
    "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-gesture-handler": "~1.3.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0",
    "jest-expo": "^34.0.0"
  },
  "private": true
}

参考