React Native 시작하기

React Native 시작하기

React Native 시작하기 링크 여기

자세한 내용은 위에 React Native 사이트를 참고.

윈도우에 안드로이드 기반으로 셋팅해보았다.

■ 설치해야될것들

React Native command line interface, Python2, a JDK, and Android Studio

■ Node, Python2, JDK 설치

Chocolatey를 통해 Node, Python2, JDK를 설치 한다.

Chocolatey 설치방법링크

cmd.exe 방법이냐 PowerShell.exe 이냐 명령어가 틀리지만

나는 cmd로 하였다.

cmd를 관리자권한으로 실행한 후 사이트에서 제공하는 명령어를 복붙한다.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

정상적으로 설치되면 바로 사용가능하다.

이제 Node, Python2, JDK를 설치 

choco install -y nodejs.install python2 jdk8

■ React Native CLI 설치

npm install -g react-native-cli

log.gauge.isEnabled is not a function 오류 발생시

nodejs 설치폴더 강제 삭제 후 node-vxx.x.x.-x64.ms파일을 다운로드 후

Repair(복구)를 실행하여 해결한다.

■ Android Studio 설치

다운로드링크

설치시 Custom 선택

필수선택사항

Android SDK

Android SDK Platform

Performance (Intel ® HAXM)

Android Virtual Device

Android Studio 실행 시 Configure -> SDK Manager -> Android SDK 선택

Android SDK Platform 27 <- 최신 버전 선택

Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image

참고이미지1

참고이미지2

■ ANDROID_HOME 환경 변수 구성

 ANDROID_HOME

 c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

■ React Native 프로젝트 생성

react-native init AwesomeProject

■ Android Studio AVD 실행

안드로이드 버전에 맞게 AVD 생성 후 실행 해봄

에뮬레이터를 종료하지 않고 띄어 놓은 생태로 놔둠

■ React Native 실행

cd AwesomeProject

react-native run-android

실행화면

※ 위에 방법을 이용하여 개발을 한다면 처음에 Android Studio 실행 -> AVD실행 순으로

시작을 해야 할것이다.

필자는 MS사의 VS CODE를 이용하기 때문에 저 방법대로 라면 Android Studio와 AVD를 

매번 실행해야 한다.

VS CODE를 이용하여 쉽게 명령어로만 실행하여 디버깅할 순 없을까?

좀더 편해지기위해 찾아보던중 emulator라는 명령어를 찾았다.

emulator라는 명령어를 이용할 것이다.

그러기위해선 Path를 추가한다.

%ANDROID_HOME%\emulator;

VS CODE 터미널에서 명령어를 입력한다.

1.에뮬레이터 목록 조회

emulator -list-avds

2. 에뮬레이터 실행

emulator @Nexus_5X_API_27

3. React Native 실행

react-native run-android