React Native環境構築で沼ったこと備忘録 for Mac M3

この記事参考にした

https://deku.posstree.com/react-native/install-on-mac/

めっちゃ丁寧で簡潔にまとまってる

1, Homebrewをインストール

2, rbenvインストール

# rbenvのインストール
brew install rbenv
# 公式の手順に乗っ取り初期化
rbenv init
# .zshrcに下記を追記しろと言われるので、追記する。
eval "$(rbenv init - zsh)"
# rbenv-doctorをたたいて、問題ないことを確認する。
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-doctor | bash
# インストール出来るRubyのバージョン一覧を確認。
rbenv install -l
# 2022/8/6時点で3.1.2が最新っぽいのでインストールする。
rbenv install 3.1.6
# 3.1.2を設定する
rbenv global 3.1.2

ターミナルを再起動(絶対)

# ターミナルを再起動してRubyのバージョン確認
ruby -v

3, bundlreをインストール

gem install bundler

4, Node.jsとnpmをインストール

brew install node

5, watchmanのインストール

brew install watchman

6, Java Development Kitのインストール

brew tap AdoptOpenJDK/openjdk
brew install adoptopenjdk/openjdk/adoptopenjdk8 --cask

7, .zshrcに必要事項を追記

.zshrcはユーザーのディレクトリ直下にある

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

8, テスト起動

# JavaScriptが良い方
npx react-native init AwesomeProject

# TypeScriptが良い方
npx react-native init AwesomeTSProject --template react-native-template-typescript

苦しめられたエラー

error Installing pods failed.

✖ Copying template
error Installing pods failed. This doesn't affect project initialization and you can safely proceed. 
However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section.

iosでビルドできないっぽい

cocoapods関係のエラーっぽい

やったこと

• cocoapodsをgemを使ってインストールした

gem install cocoapods

ターミナルを再起動しても変わらず同じエラーを吐く

• --npm のオプションをつけた

npx react-native init AwesomeProject --npm

これでいけた！！！！

Error: EMFILE: too many open files, watch

node:events:498
      throw er; // Unhandled 'error' event
      ^

Error: EMFILE: too many open files, watch
    at FSWatcher._handle.onchange (node:internal/fs/watchers:207:21)
Emitted 'error' event on NodeWatcher instance at:
    at FSWatcher._checkedEmitError (/Users/yamaguchiyusei/programming/react-native/AwesomeProject/node_modules/metro-file-map/src/watchers/NodeWatcher.js:82:12)
    at FSWatcher.emit (node:events:520:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:213:12) {
  errno: -24,
  syscall: 'watch',
  code: 'EMFILE',
  filename: null
}

Node.js v22.8.0

やったこと

プロジェクトのディレクトリで npm start を実行するとなぜか直った。。。

↓参考