React Native 시작하기

macbook을 기준으로 해서 react native 개발을 시작하는 방법에 대해서 정리를 하려고 합니다.

 

1. NodeJS 설치하기
  https://nodejs.org/en 에서 다운로드하고 설치하기

 

2. React Native CLI 설치하기

npm install -g react-native-cli

3. 프로젝트 생성하기

npx react-native init 프로젝트명

4. 에뮬레이터 설정하기

  Android Studio와 Xcode 설치하고 안드로이드 에뮬레이터 및 iOS 시뮬레이터 생성하기

 

5. 프로젝트 실행하기

// android
npx react-native run-android

// ios
npx react-native run-ios

 

* 귀찮은 시뮬레이터, 에뮬레이터 안 쓰고 개발하기

https://nomadcoders.co/react-native-for-beginners/lobby

왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders

Expo를 사용해서 Javascript 코드만 짜면 바로 프로토타이핑을 할 수 있다

 

* React Native 기본 디렉터리 구조

/my-app
|-- /src
|   |-- /components
|   |   |-- Input.js
|   |   |-- List.js
|   |   |-- Button.js
|   |-- /screens
|   |   |-- HomeScreen.js
|   |   |-- DetailScreen.js
|   |-- /navigation
|   |   |-- AppNavigator.js
|   |-- /store
|   |   |-- index.js
|   |   |-- Reducer.js
|   |-- App.js
|-- package.json
|-- ...

 

 

* 프로젝트 실행이 안 될 경우

npx react-native doctor

위 명령어로 문제점이 무엇인지 목록으로 볼 수 있고 자동으로 문제해결을 시도할 수 있습니다.

* React Native Doctor 문제

Adb - No devices connected 문제 : emulatator 실행하기

JDK, SDK - Version N/A 문제 : jdk 설치 https://www.oracle.com/java/technologies/downloads/#jdk20-mac

Download the Latest Java LTS Free

ANDROID_HOME 문제 : bashrc 혹은 zshrc에 다음 코드 추가

export ANDROID_HOME=/Users/USERNAME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/emulator

 

* run-android 문제

Could not open settings generic class cache for ... Unsupported class file major version 64

> 자바버전과 gradle 버전이 안 맞을 때 발생하는 이슈, ./android/gradle/wrapper/gradle-wrapper.properties 파일을 수정하여 해결함

// distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-8.1.1-all.zip

* import 문제

react-native-gesture-handler could not be found within the tproject or in these directories: node_modules

위와 같은 에러가 발생할 경우 해당 패키지를 설치하면 간단하게 해결된다.

npm i react-native-gesture-handler

 

* run ios 문제

ios 디렉토리에서 pod install로 dependency 설치를 해준다.

note: Building targets in dependency order
... error: Signing for "xxx" requires a development team. Select a development team in the Signing & Capabilities editor.

xcode로 프로젝트명.xcworkspace를 실행시키고 Signing & Capabilities에서 Team 설정이 제대로 되어있는지 확인한다.