M1 Mac에 React-Native 설치 삽질기

잠시나마 m1산거 후회함 ezr

+++ ) 2021 11 25

https://github.com/aiba/react-native-m1/blob/main/README.md

이 README 따라하시면 더 간편하게 바로 세팅 가능합니다!

GitHub - aiba/react-native-m1: react-native 0.64.2 with Apple M1 and XCode 12.5

처음 설치 참고한 블로그들

https://iagreebut.tistory.com/81

[Silicon Mac M1] React Native 설치하기

https://dev-yakuza.posstree.com/ko/react-native/install-on-mac/

マック(Mac)にreact nativeの開発環境を構築する方法

https://velog.io/@sseumeong2/React-Native-MACM1-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95-%ED%95%98%EA%B8%B0

[React Native] MAC(M1) 개발 환경 설정 하기

빌드 시작해볼까?

위 블로그들 참고하여 기본적으로

로제타, watchman, ffi, cocoapods 등을 설치 후 일단 ios build 해봤다.

android 는 하지도 않았는데 이유는 m1에 issue가 너무 많아서..

^^.. 띠용

빌드 실패와 함께 ios simulator에는 홈 화면만 떴다.

구글링 고고

 

해결하기 위한 눈물겨운 삽질기

https://github.com/CocoaPods/CocoaPods/issues/10518

[error report] pod install /w m1 macbook · Issue #10518 · CocoaPods/CocoaPods

로제타로 터미널을 열긴 했는데 

pod install 을 그냥 하면 안되고 

Did you try:
sudo arch -x86_64 gem install ffi
And run:
arch -x86_64 pod install instead of pod install.
I hope this will help you.

처럼 해야한다고 한다.

오오.

pod install 그냥 할 시 abort 됐는데 저렇게 하니까 정상적으로 install 이 된다!

근데. . 계속해서 build error 발생

https://stackoverflow.com/questions/67961306/react-native-on-m1-air-fails-to-build-for-ios

React Native on M1 Air fails to build for iOS

pod file 을 수정하라고 하신다.

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'Tutorial' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'TutorialTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  #use_flipper!()
  #use_flipper!({ 'Flipper-Folly' => '2.5' }) # update this part
  use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })
  # post_install do |installer|
  #   #react_native_post_install(installer)
	#   flipper_post_install(installer)
	#   installer.pods_project.build_configurations.each do |config|     
  #     config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"   
  #   end
  #   installer.pods_project.targets.each do |t|
  #     t.build_configurations.each do |bc|
  #           if bc.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] == '8.0'
  #               bc.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.4'
  #           end
  #       end
  #   end
  # end
  # post_install do |installer|
  #   react_native_post_install(installer)
  # end
  post_install do |installer|
    react_native_post_install(installer)
    installer.pods_project.build_configurations.each do |config|
      config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
    end
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '10.0'
      end
    end 
  end
end

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 저 주석처리 한 것들이 다 저의 삽질 ...

이것은 최종 build 성공한 pod file 입니다.

 

https://dev.to/frafajec/react-native-ios-on-m1-mac-2ia0

React Native iOS on M1 mac

저 pod file 로도 사실 build가 되지 않았는데

자 이제 여길 보고 수정하면 된다. Xcode를. ..

 

Xcode 내부에 project/ios 폴더를 open 하고 build setting을 변경해줘야한다.

이때 Xcode 도 로제타로 열어야함!

 

arm64..

build setting -> Architectures -> Excluded Architectures  내부에 Debug, Release 모두 arm64를 적어준다.

 

 이 부분도 다른 해외 블로그를 통해 변경했다.

build setting -> Search path -> Library Search Paths 를 다음과 같이 변경해준다.

 

마지막으로 build 전 혹시 모르니 

rm -rf ~/Library/Developer/Xcode/DerivedData/

빌드 파일을 clean 시켜주자.

다시 pod install 후 react-native run-ios (프로젝트 루트 폴더에서) 실행 시

???

While running the build from XCode a lot of libs will throw warnings but thats expected. In case you get stuck on an error that says something like "...require higher target...", then in XCode, find the pod and increase the iOS target to 10+ version.

 

음 그렇다고 한다.

 

사실 다른 블로그들 보면 config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'

으로 나와 있는데 10.0으로 해야 된다. 영어로 된 글을 보고 pod 내부에서 10.0으로 변경해줬다.

 

성공~!

눈물겹게 삽질한 끝에 m1 맥북에서 react-native ios build에 성공했다.

언젠가 저처럼 m1 맥북에다가 RN을 설치하며 골머리를 앓으실 분들을 위해 글 남깁니다.. 화이팅!