본문 바로가기

React Native

[React Native] Window 설치(npx react-native run-android)

반응형

앱개발을 하고자 React native를 배우고 있다. 

개발에 앞서 설치부터 해보자

 

reactnative는 android, ios둘다 동시에 개발할 수 있따는 아주 큰 장점이 있따.

 

그러나 window는 개발을 해도 android만을 실험할 수 있다.(ios불가능)

그래서 맥북을 샀다. 다음에 맥에서 설치하는법도 올리겠다.

 


reactnative를 하기 위해서는 Node, jdk, Android Studio등이 필여하다.

 

 

 

노드, jdk설치

choco install -y node.js.install openjdk8

2. Android Studio 설치

 

설치할때 설치마법사에서 Android SDK, Android SDK Platform, Android Virtual Device, HAXM을 체크하고 설치하자 (캡처를 못해따 ㅠ)

 

3. Android SDK manager

 

Android Studio를 설치하고나서 SDK manager에 들어가서

SDK manager

좌측 하단에 'show package details'를 누른다.

 

Android10.0(Q) 항목 밑에 

 Android SDK Platform 29 

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

를 선택하고 설치해준다.

 

4. ANDROID_HOME 환경 변수 설정

 

내 환경 변수 설정에서 사용자 변수에 들어간다.

사용자 변수 편집

이름은 ANDROID_HOME

변수 값은 Android SDK의 경로

로 입력하고 새로만들어준다.

( SDK는 기본적으로 %LOCALAPPDATA%\Android\Sdk  에 설치된다.)

 

!!! Android Studio에서 "설정" 대화상자의 Apperance&Behavior > System Setting > Android SDK에서 실제 위치를 확인 할 수 있다.

 

5. Path에 platform-tools추가 

 

환경변수 사용자 변수 중 Path 변수에 %ANDROID_HOME%\platform-tools를 추가해준다.

Path 설정

 

 

terminal에 echoe %ANDROID_HOME% 을 입력했는데 아무것도 안뜨면 4번이 잘못된거고

 

adb를 쳤는데 아무것도 안뜨면 5번이 잘못된거다 확인해보자.

 

이제 설치는 끝났다.

 

설치하고자 하는 디렉토리로 이동한 후

 

npx react-native init [파일명]

ex)
npx react-native init hyukiscoding

을 터미널에 입력해주면 hyukiscoding이라는 react-native프로젝트가 생성된다.

 

실행할때에는

 

Start Metro 

npx react-native start

Start your application

npx react-native run-android

하면 실행된다.

 

 

사실 두가지를 순서대로 할 필요는 없다. npx react-native run-android만 해도 실행이된다.

 

 

그러면 모두 열코 @!@!

 

참고 문서 :reactnative.dev/docs/environment-setup

 

Setting up the development environment · React Native

This page will help you install and build your first React Native app.

reactnative.dev

 

반응형