[React-Native] React Native Android 무작정 시작하기(설치)

React-Native 무작정 시작하기

요즘 react native를 공부하고 있습니다.

하나의 개발 플랫폼으로 안드로이드와 iOS 둘 다 대응할 수 있다는 점에서 굉장히 매력적입니다.

react native에 대한 설명과 장단점은 다른 곳에 많이 설명되어 있습니다. (ex: react native by realm)

그래서 저는 설치하고 시작해보는 방법을 알아보겠습니다.

1. node.js, python2 설치

  cmd 창에서

  node.js 설치 : choco install nodejs.install

  python2 설치 : choco install python2

# 여기서 choco명령어를 실행하기 위해서는 chocolatey(설치방법)가 설치되어 있어야 합니다.

2. react-native cli(command line interface) 설치

  cmd 창에서

  npm install -g react-native-cli

# Node.js에는 npm이 있으며 nodejs 설치경로에서 명령창 열기 후 명령어 실행

3. 안드로이드 개발환경 셋팅

3-1. Android Studio 설치

  - Android Studio는 React Native 앱을 실행하고 테스트하는 데 필요한 Android SDK 및 AVD (에뮬레이터)를 제공합니다.

3-2. AVD 및 HAXM 설치

  - Android Studio를 처음 설치할 때 맞춤 설치를 선택합니다.

  - 다음 항목이 선택되어 있는지 확인 후 'Next'를 클릭하여 선택된 항목을 설치합니다.

    Android SDK

    Android SDK Platform

    Performance (Intel ® HAXM)

    Android Virtual Device

3-3. Android 6.0 (Marshmallow) SDK를 설치합니다.

  - Android Studio는 기본적으로 최신 Android SDK를 설치합니다. 그러나 React Native에는 Android 6.0 (Marshmallow)

    SDK가 필요합니다.

  - Android 6.0 (Marshmallow) SDK에 다음 항목들을 선택 후 설치합니다.

    Google APIs

    Android SDK Platform 23

    Intel x86 Atom System Image

    Intel x86 Atom_64 System Image

    Google APIs Intel x86 Atom_64 System Image

  - 그런 다음 Android SDK Build-Tools 23.0.1 설치합니다.

3-4. ANDROID_HOME 환경변수 설정

  - React Native command line interface를 사용하기 위해서는 ANDROID_HOME 환경 변수를 설정해야합니다.

  - 내 컴퓨터 -> 속성 -> 고급 시스템 설정 -> 환경 변수 -> 시스템 변수 새로만들기에서

    변수이름 : ANDROID_HOME

    변수 값 : Android SDK 경로

    를 입력합니다.

ex)

  - 환경변수를 적용하기 위해서는 cmd를 재실행 하여야합니다.

4. 테스트할 기기를 연결하거나 AVD를 실행시킵니다.

5. react-native 앱 생성 및 실행

5-1. NewProject 생성

  - react-native init NewProject

# react-native 명령이 없다고 나오면 npm 디렉토리로 이동해 실행합니다.

5-2. react-native 실행

  - cd NewProject

  - react-native start

5-3. NewProject 실행

  - 새로운 cmd 창을 열고 NewProject 디렉토리로 이동한 후 프로젝트를 실행합니다.

    react-native run-android

# 시뮬레이터라면 R을 2번, 실제 기기라면 기기를 흔들어 설정 다이얼로그를 띄우고

   [Dev Settings] - [Debug server host & port for device]에서 ip와 port입력

   ex) 192.168.xx.xx:8081

- 위 순서대로 진행되었다면 시뮬레이터 또는 기기에 앱이 컴파일되어 실행될 것입니다!

  이상 React Native Android 설치부터 시작까지 였습니다!