React Native 설치 및 시뮬실행

설치

 

 

공홈 : https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

 

 

1. Node, watchman 설치

 

터미널을 실행하여 입력.

brew install node
brew install watchman

 

brew가 없다면

https://benoit.tistory.com/9

M1에서 Homebrew 설치

 

 

2. cocoapods 설치

sudo gem install cocoapods

 

3. 프로젝트 생성

npx react-native init AwesomeProject

 

4. VSCode 설치

 

URL : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

5. VSCode에서 생성된 폴더 열기

 

iOS 시뮬 실행

 

1. Xcode 설치

 

- AppStore에서 Xcode 검색해서 설치

 

 

2. Command Line Tools 체크

 

메뉴 Xcode/Preferences 실행

Locations에서 Command Line Tools 눌러서 아래와 같이 적용되도록 설정

 

 

 

3. Simulators 체크 : 보통은 설치 시 생김

 

메뉴 Window/Devices & Simulators 실행

좌측에 시뮬이 없다면 + 눌러서 추가

 

 

 

4. pod 설치

 

터미널에서 생성된 폴더내에 ios로 이동하여 실행

본인의 경우 아래와 같이 함

- m1 imac :

             : pod install --repo-update

- m1 macbook pro :

             : sudo arch -x86_64 gem install ffi  <<<아래 명령어가 에러날때

             : arch -x86_64 pod install

cd 생성된 폴더 경로/ios
pod install

 

 

5. Start Metro

npx react-native start

 

6. iOS 시뮬 실행

 

터미널에서 생성된 폴더로 접근해서 실행

cd 생성된 폴더 경로
npx react-native run-ios

 

 

Android 시뮬 실행

 

1. 터미널에서 JDK 설치

brew install --cask adoptopenjdk/openjdk/adoptopenjdk11

 

2. Android Studio 설치

 

URL : https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android Developers

 

 

3. 환경변수 설정

open ~/.zshrc

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

 

닫고 저장하자.

 

source ~/.zshrc

 

참고로 bash_profile은  수정안해도 된다.

 

 

4. api level 29 설치

SDK Manager/Android SDK에서 SDK platforms 진입

API Level 29 체크 후 OK 클릭해서 설치

 

 

 

 

 

5. 시뮬생성

 

Tools/Device Manager에서 Create device를 클릭하여 API Level 29를 바라보는 device를 생성하자.

 

 

 

 

6. Start Metro

npx react-native start

 

7. Android 시뮬 실행

 

터미널에서 생성된 폴더로 접근해서 실행

cd 생성된 폴더 경로
npx react-native run-ancroid

 

 

 

 

결과화면