MacのM1チップReact-Native導入部分でのつまづきポイント

#参考書籍
Starting mobile app development with React Native and Expo (Japanese Edition)
上記を参考にやってみた所、私のMacがM1チップ搭載だったためか、ビルドにやたら苦労したので、後に続く人が同じ所で詰まらないようにそれを書いておきます。M1チップの環境構築に苦労してる人向けです。

#環境
・MacOS BigSir 11.4 Beta
・チップ Apple M1
・XCode 12.5

#流れ
・Node.js
・Homebrew
・Watchman
・react-native-cli

をインストールしていざ”react-native init hello_world”をしてみる。
すると、

To eliminate this warning, please install libyaml and reinstall your ruby.

このような文が出てくる。

##libyamlは簡単にインストールできたが・・・

$ brew install libyaml

しかし、以下のコマンドを打つとエラーになる。

rbenv install --verbose 2.7.2

エラー

BUILD FAILED (macOS 11.2 using ruby-build 20210119) Mac Big Sur

こんなメッセージが出てくる。
どうやらM1チップにはそのままRubyをインストール出来ないらしい。

##解決方法

以下のコマンドを打ち、Rubyをインストールして適用する。

RUBY_CFLAGS="-Wno-error=implicit-function-declaration" RUBY_CONFIGURE_OPTS="--with-openssl-dir=`brew --prefix openssl` --with-readline-dir=`brew --prefix readline`" sudo arch -x86_64 rbenv install --verbose 2.7.2

rbenv rehash 
rbenv global 2.7.2

Rubyの2.72を使用するのはM1と互換性のあるバージョンが2.72だかららしい。

参考→https://github.com/ffi/ffi/issues/869

#ここで終わったと思ったが・・・
Cocoapodsをインストールしてなかったのでインストールして、改めて

react-native init hello_world

を打ち込むと問題なく

Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/Users/yakiniku/hello_world" && npx react-native run-android
  
  Run instructions for iOS:
    • cd "/Users/yakiniku/hello_world" && npx react-native run-ios
    - or -
    • Open hello_world/ios/hello_world.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button
    
  Run instructions for macOS:
    • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.
    

ビルド出来ますよ画面が出てくる。
しかし、

cd hello_world
react-native run-ios

とすると以下のエラーが。

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening hello_world.xcworkspace.
Command line invocation:

要約するとコマンドラインからビルドに失敗したから、XCodeから直接ビルドしてね、とある。

#解決策

1.Pods→Podfile
2.最後の４行を最後の行以外コメントアウト。
3.Terminal上で以下のコマンドを打つ

cd ios && pod install --repo-update

これを打つことでflipperのライブラリがプロジェクトから読み込まれなくなる。

参考→https://github.com/oblador/react-native-vector-icons/issues/1144

#結果

対ありでした。

#追記
コメントアウトして対応したバグですが、どうやらXCode12.5の時に起こるバグらしいです。
下記の記事によると12.4にダウングレードするとFlipperが正常にビルドできるため、コメントアウトする必要はないようです。

又は以下のように変更することでビルドが通るようです。

そのうちパッチが出ると思うので、それを待つのも良いかもしれませんね。