티스토리 뷰

프로그래밍/React Native

[m1 mac] React Native 개발 환경 구축 Xcode - 빌드 시 주의사항, 이슈 해결, 디바이스 시뮬레이터 돌리기

우징어🦑 2022. 8. 21. 17:17

설치

  • OS : macOS Monterey 12.5
  • node : v16.16.0
  • npm : 8.11.0
  • watchman : 2022.08.15.00
  • xcode : 13.4.1
  • cocoapod : 1.11.3
  • react-native : 8.0.6
  • openjdk14
  • javac : 14.0.2

내 핸드폰 기종이 iPhone이라 Xcode를 이용하여 React Native 개발 환경 구축을 진행하였다.

프로젝트 생성

npm install -g react-native-cli
npm install -g react-native
npx react-native init ProjectName

[m1 mac] cocoapod 설치 이슈

pod install 도중 에러가 발생했다. (빨간 부분)

찾아보니 m1 mac은 pod install 시 다른 명령어를 실행해야 제대로 설치가 된다.

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
 

Don't forget to include the Crash Report log file under DiagnosticReports directory in bug reports

I run pod install and got this issue on Mac OS M1: [NOTE] You may have encountered a bug in the Ruby interpreter or extension libraries. Bug reports are welcome. For details: https://www.ruby-lang....

stackoverflow.com

 

Xcode로 빌드 진행

Build Fail 이슈 1

.xcodeproj 말고 

.xcodespace 열기

해당 파일을 열면 Xcode가 실행된다.

 

Build Fail 이슈 2

RCT Folly - time.h 파일에서 build fail이 났다.

에러가 난 해당 파일에서

# 이 부분을
__IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_10_0

# 아래 코드로 수정
__IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_12_0

로 수정하여 해결하였다.

 

 

Error in Pods/RCT-Folly/folly/portability/Time.h and Typedef redefinition with different types ('uint8_t' (aka 'unsigned char')

I'm reviewing the source code of a react native project, but I'm having issues building it. After running the following npm install at the root of the project pod install at the ios folder I got ...

stackoverflow.com

 

Build Fail 이슈 3

다음에는 FBReactNativeSpec 파일에서 build fail이 났다.

Command PhaseScriptExecution failed with a nonzero exit code

 

해결을 위해 아래 깃헙 이슈 댓글들을 살펴보았다.

 

 

FBReactNativeSpec error after upgrade from 0.63.4 to 0.64.0 · Issue #138 · react-native-community/upgrade-support

Environment System: OS: macOS 11.2.3 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz Memory: 1.27 GB / 16.00 GB Shell: 5.8 - /usr/local/bin/zsh Binaries: Node: 12.18.0 - ~/.nvm/versions/node...

github.com

추천을 가장 많이 받은 unset PREFIX 해결책이 안먹혔다.

댓글 중 하나에 폴더명에 띄어쓰기를 없앴더니 해결되었다는 내용이 있길래 나도 고쳐보았다.

(부모폴더 이름을 React Native Practice -> ReactNativePractice 로 고침)



다행히 It's working!

 

 

※ cmd + shift + k : Build Clean

 

 

빌드 성공 후 디바이스 iPhone과 연결

mac과 iPhone을 연결한 다음 Xcode signing & capablites 탭에서 시뮬레이션 기기로 나의 iPhone을 선택해준다. 

 

빌드가 성공하면 아이폰에 해당 앱 아이콘이 나타난다.

앱을 확인할 수 없음

이런 문구가 뜬다면 와이파이 연결하기

 

신뢰하지 않는 개발자

설정 > 일반 > VPN 및 기기관리

> 해당 앱 신뢰 누르기

 

 

 

그리고 앱을 실행하면 아래와 같이 React Native 초기 화면이 뜬다.

 

 

장장 5시간동안의 React Native 개발 환경 구축 성공..!

 

저작자표시

'프로그래밍 > React Native' 카테고리의 다른 글

[React Native] ScrollView, FlatList 차이  (0) 2022.08.28
[React Native] Navigator - Screen 이동  (0) 2022.08.23
[React Native 태그] Touchable 요소들, TextInput  (0) 2022.08.16
React Native - (2) 기본 문법, Styling, Third Party Packages, Flex Layout  (0) 2022.08.15
React Native - (1) 작동원리, Expo 활용 개발, 설치 (Mac 기준)  (0) 2022.08.13