[React Native] Xcode, Android Studio 에서 React Native 프로젝트 실행하기

최초 작성일 : 2023.09.01

최종 수정일 : 2023.09.01

 

 

1. 개요

React Native에서 프로젝트를 생성하고 보통 아래의 명령어를 통해 프로젝트를 실행한다.

// ios
npm run ios

// android 
npm run android

 

하지만 앱을 출시하기 위해선 결국 Xcode, Android Studio에서 앱을 빌드해야 하고, 드물지만 npm run ~ 명령어에선 정상적으로 실행됐지만 막상 Xcode, Android Studio에선 문제를 일으키는 경우도 있었다.

그래서 나는 개발을 할 때에도 가급적이면 Xcode, Android Studio에서 실행하는 편이다.

 

이번 포스트에서는 Xcode, Android Studio에서 React Native프로젝트를 실행하는 법을 정리해 보았다.

이 포스트에서는 testApp이라는 이름의 프로젝트를 아래의 명령어로 만든 후 진행했다.

npx react-native init testApp

 

React Native 개발 환경 구축, 프로젝트 생성 방법은 아래 글에서 다루었다.

 

https://w-storage.tistory.com/45

ARM mac(m2)에서 React Native 개발환경 세팅하기

 

 

2. IOS

React Native로 만든 프로젝트의 IOS버전은 Xcode에서 실행할 수 있다.

Xcode에서 [프로젝트 폴더]/ios/testApp.xcworkspace을 실행한다.

testApp.xcodeproj(파랑색 아이콘)이 아닌 testApp.xcworkspace(흰색 아이콘)이다!

파랑색이 아닌 흰색이다.

그리고, 기기를 선택한 뒤 실행한다. 기기는 Any iOS Device가 아니면 된다. 

아래 화면처럼 가상머신이 실행되고, 화면이 나오면 성공이다!

 

 

3. Android

React Native프로젝트의 Android 버전은 Android Studio에서 실행할 수 있다.

IOS에 비해 다소 과정이 더 필요하다.

Android Studio에서 [프로젝트 폴더]/android 폴더를 연다.

특정 파일이 아닌 폴더를 연다

Android Studio에서 첫 실행이라면 우측 하단에 프로그래스바가 진행중일텐데 모두 끝날 때 까지 기다린다.

시간이 다소 걸릴 수 있다.

 

좌측 상단에 Android를 눌러 Project로 바꿔준다.

android > app > src > main 아래에 assets 폴더를 하나 추가한다.

터미널을 켠 뒤 [프로젝트 폴더]/android로 이동해서 아래 명령어를 입력한다.

./gradlew clean

[프로젝트 폴더]로 이동해서 아래 명령어를 입력한다.

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

 

마지막으로 우측 상단의 Run 버튼을 눌러 프로젝트를 실행한다.

아래 화면처럼 가상머신이 뜨고, 앱이 실행되면 성공이다!