React Native 설치 Windows, Android Studio 사용하기.

 

 

이 글은 Windows(윈도우) 에서 설치하는 방법이다.

 

1. Visual Studio Code를 통한 React-Native 프로젝트 개발

2. 안드로이드 스튜디오를 통한 React-Native 실행하는 방법

위 2가지를 다룰 것이다.

 

Expo를 이용한 React Native 설치는 아래 링크에 있다.

2018/11/11 - [Develop/React Native] - React Native expo를 이용한 설치 Windows, Android Studio (v31.0.0)

 

1. 먼저 React Native를 설치한다.

 

설치하기전에 Node.js를 설치해야한다. 링크 - https://nodejs.org/

Node.js를 설치했다면 React Native를 설치한다

npm install -g react-native-cli

 

2. 설치후 React Native 프로젝트를 생성한다.

 

아래의 명령어를 통해 test1 프로젝트를 생성한다.

react-native init test1 

 

 

3. React Native Visual Studio Code

 

React Native 의 에디터로 atom, vscode, sublimetext 등이 있지만 vscode가 가장 빠르다고 한다. 그래서 vscode를 사용한다.

https://code.visualstudio.com/ 옆의 홈페이지를 통해 간단하게 설치를 할 수 있다. 

다음 Visaul Stuido Code를 연다 연다음 아까 만든 test1 프로젝트를 추가한다.

 

 

추가 후에 App.js 파일의 빨간 줄 표시를 한번 수정해보자. 

 

 

필자는 아래와 같이 수정해 보았다. 굳이 안해도 됨.

 

4. React Native Android Studio

 

https://developer.android.com/studio/install?hl=ko 사이트에 접속하여 안드로이드 스튜디오를 우선 설치한다.

 

Tools - SDK Manager에 들어간다.

 

 

React Native 는 4.1 부터 지원하므로 필자는 9.0과 8.1를 설치했다.

그리고 SDK Location을 복사한다.

 

 

복사한 SDK LOCATION을 환경변수에 추가한다 ANDROID_HOME 그리고 JAV_HOME이라는 환경변수를 추가한다

JAVA_HOME은 c드라이브의 programfile에 java폴더의 jdk 폴더 경로를 추가한다. (C:\Program Files\Java\jdk1.8.0_191)

 

 

그리고 SDK Tools에 들어가 체크되어있는 것들을 설치한다.

 

 

그리고 Tools - AVD Manager에 들어가서

 

 

Create Virtual Device를 통해 ADV를 설치한다 필자는 API Ver 28을 설치했다. 그리고 Action의 시작버튼을 클릭하면 가상에뮬레이터가 실행된다.

 

 

마지막으로 다시 cmd창에서 

아래의 명령어를 입력한다.

 

cd test1 react-native run-android

 

아래와 같이 실행 된다.

 

 

 

필자는 아까 Visual Studio Code에서 수정한 것을 실수로 저장을 하지 않아서 내용이 바뀌지 않았지만,

이렇게 실행되는 모습을 볼 수 있다.