[TIL] React Native - M1 setting (Rosetta 없이)

 

 

 

 

---

 

React Native app on an M1 Mac

 

 

기본 세팅

 

 

우선, 기본세팅은 React Native 공식 사이트나 다른블로그에 많이 나와있으니 생략하고

M1에서만 추가적으로 해야할 것들만 상세히 정리하겠습니다.

 

 

 

Homebrew 설치

1. brew install node (17.x 이상버전 충돌 가능성 있음)
2. brew install watchman

 

Android Studio

1. SDK 설치
   1. custom 선택
   2. 계속 진행
2. JDK 11 이상 설치
3. SDK 설정

 

Xcode (Appstore)

1. Cocoapods
2. yarn 설치
   1. sudo npm install -g yarn

lerna 설치

gulp 설치

 

 

 

 

 

[공식문서 참고]

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

Setting up the development environment · React Native

 

 

 

 

 

 

 

---

 

 

 

 

 

M1 추가 세팅

 

 

Ruby

brew install ruby

 

- .zshrc 설정

open ~/.zshrc

 

제일하단에 환경변수를 추가해줍니다.

export PATH=/opt/homebrew/opt/ruby/bin:/opt/homebrew/lib/ruby/gems/3.0.0/bin:$PATH
export LDFLAGS="-L/opt/homebrew/opt/ruby/lib"
export CPPFLAGS="-I/opt/homebrew/opt/ruby/include"

 

 

 

 

Xcode setting

• BridgingFile.swift 생성

 

 

• Targets - Build setting - Architectures - Excluded Architectures - Debug/Release에 arm64추가

 

 

 

• Project - Info - Deployment Target을 11.0으로 맞춤

 

 

 

rm -rf Pods Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData/*
pod deintegrate && pod setup && pod install

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

최종 실행

 

 

 

- root 폴더에서 build

yarn build

 

- 해당 폴더로 들어가서 metro 실행

yarn start

 

- 터미널을 추가로 열어서 ios 실행

npx react-native run-ios

 

 

 

 

 

 

 

 

 

 

 

참고 사이트

 

 

[로제타 없이 M1 세팅하기 1]

[로제타 없이 M1 세팅하기 2]

[로제타로 세팅하기 1]

[로제타로 세팅하기 2]