expo를 이용해 기본 react native app을 만들자 roids upplements. 먼저 npm을 이용해 expo-cli 툴을 설치하도록 한다.
$ npm install -g expo-cli
expo-cli 를 설치하면 expo 명령을 사용할 수 있다. expo 명령으로 새로운 프로젝트를 생성해보자.
$ expo init AwesomeProject
위 명령으로 프로젝트를 생성할 때 다음과 같은 configuration을 선택할 수 있다.
$ expo init AwsomeProject ? 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
이 포스트에서는 blank 설정을 사용해 프로젝트를 생성했다.
? Choose a template: expo-template-blank ? Please enter a few initial configuration values. Read more: https://docs.expo.io/versions/latest/workflow/configuration/ › 50% completed { "expo": { "name": "<The name of your app visible on the home screen>", "slug": "AwsomeProject" } }
App 이름을 설정할 수 있다. 원하는 이름으로 설정한다.
? 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.17.3 found. Use Yarn to install dependencies? (Y/n)
위와 같이 프로젝트가 생성되었다면 다음 명령으로 프로젝트를 실행할 수 있다.
$ cd AwsomeProject $ yarn start
위 명령을 실행하면 아래와 같은 결과를 확인할 수 있다.
$ yarn start yarn run v1.17.3 $ expo start Starting project at /Users/victor/010_dev/AwsomeProject Expo DevTools is running at http://localhost:19002 Opening DevTools in the browser... (press shift-d to disable) Starting Metro Bundler on port 19001. Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device. Tunnel ready. exp://192.168.0.119:19000 [QR코드가 출력되는 위치] 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.
보는바와 같이 ‘a’는 android emulator실행. ‘i’는 iOS 등으로 실행해볼 수 있다.
android 실행 결과는 다음과 같다.
Pingback: React Native 개발 자료 모음 - Seed's Tale