[Windows] React Native 윈도우 환경 구성하기

최근에 React Native 윈도우 환경 구성해서 어플 개발할 일이 생겨서 시도했다.

 

React Native Windows 환경 구성 요소

1. Node.js 설치

2. React Native CLI 설치

3. JDK 설치

4. 안드로이드 스튜디오 설치

5. 프로젝트 생성 및 실행

 

중간중간 오류가 엄청 많이 났어서 해당 오류까지 확인할 예정

 

1. Node.js 설치

https://nodejs.org/ko/

Node.js — 어디서든 JavaScript를 실행하세요

 

해당 URL 에서 msi 파일 다운 받고 기본 설정으로 설치해준다 . ( 다음다음다음 눌러서 설치 .. )

 

* 설치 확인하기

node -v
npm -v

해당 명령어로 node와 npm이 정상적으로 설치 되었는지 확인 가능하다.

---

2. React-Native-CLI 설치

npm 명령어로 react-native-cli를 설치한다.

npm install -g react-native-cli

 

리액트 네이티브 버전 확인 명령어로 설치를 확인할 수 있다.

npm react-native -v

 

---

3. JDK 설치

https://p-ssw0rd.tistory.com/115

[JAVA/Windows 10 pro] JDK 1.9 설치 / 환경 변수 설정

JDK 설치 확인을 위해 버전 확인 명령어를 사용한다.

java -version
javac -version

---

4. 안드로이드 스튜디오 설치

안드로이드 기본 설정으로 설치완료한다.

환경 변수 꼭 설정해줘야한다.

변수 이름 : ANDROID_HOME

변수 값 : C:\Users\ㅇㅇㅇ\AppData\Local\Android\Sdk

 

path 설정

%ANDROID_HOME%\platform-tools

 

adb 버전 확인 명령어로 설치 확인해준다.

adb --version

 

---

 

5. React Native 프로젝트 생성

혹시 모르니 cmd를 관리자 모드로 오픈 후 프로젝트 생성할 위치의 폴더로 이동한다.

C:\Users\chaen>cd C:\Users\chaen\00chaen\calculator
npx react-native init calculator	# calculator 프로젝트 생성

 

생성한 위치에서 안드로이드를 실행한다.

npm run android

 

처음에 무슨 이상한 오류인데 Gradle이 실패했음을 나타내는 오류가 나왔다...

BUILD FAILED in 1m 35s
error Failed to install the app. 
Command failed with exit code 1: gradlew.bat app:installDebug 
-PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. 
* Where: Settings file 'C:\Users\chaen\00chaen\calculator\android\settings.gradle' 
line: 2 * What went wrong: Error resolving plugin [id: 'com.facebook.react.settings'] > 
java.io.UncheckedIOException: Could not move temporary workspace (C:\Users\chaen\00chaen\calculator\android\.gradle\8.10.2\dependencies-accessors\569c8b261a8a714d7731d5f568e0e5c05babae10-d0d44398-45f8-43e9-95d2-6107f9fef694) 
to immutable location (C:\Users\chaen\00chaen\calculator\android\.gradle\8.10.2\dependencies-accessors\569c8b261a8a714d7731d5f568e0e5c05babae10) 
* Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > 
Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 1m 35s.
info Run CLI with --verbose flag for more details.

그래서 Gradle 캐시 삭제를 요청함

gradlew clean

그랬더니 캐시 삭제 주르륵 하더니

 

npx react-native run-android

해당 명령어 실행 시 잘 실행 됐다.

 

node.js에서는 이렇게 뜬다

안드로이드 에뮬레이터는 이렇게 뜸 !