이 글은 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에서 수정한 것을 실수로 저장을 하지 않아서 내용이 바뀌지 않았지만,

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


+ Recent posts