React Native&Expo 개발 환경 구축

비망록

Expo 회원 등록하기

스마트 폰에 Expo 앱 설치

Apple Store에서 다운로드


앱을 열고 Profile에서 Expo 회원 가입한 계정으로 로그인

PC로 개발 환경 구축

npm과 node가 들어 있으면 아래 명령 만

npm install expo-cli --global

프로젝트 초기화

앱 이름이 myApp인 경우,

expo init myAPP

우선 blank를 선택

~/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 또는 입력 (선택 사항)

? 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로 설치한다.

? 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로 애플리케이션을 시작할 수 있다.

Your project is ready at /Git/ReactNative_learning/myApp

To get started, you can type:

  cd myApp
  yarn start

이때 Package.json
React Native계의 모듈이 들어 있다.

{
  "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
}

생성된 프로젝트의 루트 파일

앱을 시작하는 방법

myApp 아래에서 yarn start 명령. 다음과 같이 QR 코드가 표시됩니다.


그것을 아이폰의 카메라를 잡는 것만 (촬영하지 않아도 좋다). 아이폰 화면에 "Expo에서 열기"라고 pop-up이 나오므로 그것을 터치하면 Expo 클라이언트가 열립니다.


초기화면↓

개발 PC와 아이폰은 같은 LAN 네트워크에 없으면 안됩니다.

UI용 모듈 React Native Elements 설치

이것은 어디까지나 내 경우

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

필요에 따라 sudo 를 붙여