どうもこんにちはたくびー(@takubii)です。
今回はReact nativeの環境構築について紹介したいと思います。
なお、Expoは使わずReact native CLIで構築を行いました。
この記事は2023年3月に書いています。今後のバージョンアップなどで同様の手順では構築できない可能性がありますので、注意してください。
参考
条件は以下となっております。
- M1 Mac
- IOS、Androidそれぞれエミュレーターで動かす
- React native CLI
IOS、Android環境共通
$ brew install watchman
node.jsに関してはバージョン管理できるnvm経由でLTSをインストールします。
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
$ nvm install --lts
$ nvm use --lts
IOS
cocoapodsoをインストールするためにRubyをインストールします。
おそらくRubyはデフォルトで入っていると思いますが、バージョンが古いのでrbenvを使用してドキュメントに記載のあるバージョンに変えます。
$ brew install rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc
$ source ~/.zshrc
$ rbenv install 2.7.6
$ rbenv global 2.7.6
$ gem install bundle
※rubyの最新バージョンをインストールしたい場合は以下のコマンドでいけます。
$ brew install libyaml <- これが必要
$ rbenv install 3.2.1
cocoapodsのインストールは公式サイトに従って以下のコマンドで完了です。
$ sudo gem install cocoapods
X codeも必要なのでインストールしますが、こちらはApp Storeからしかインストールできなかったので、適当なアカウントでApp Storeから落としてきてください。
その後、起動したら[settings...]をクリックし、[Locations]タブの[Command Line Tools]から選択しインストールをします。
IOS固有の環境構築はこれでOKです。
Android
私の環境ではJDKはすでにインストール済みでしたが、入っていない方は以下のコマンドでJDKをインストールします。
$ brew tap homebrew/cask-versions
$ brew install --cask zulu11
Androidの開発にはAndroid Studioが必要なので https://developer.android.com/studio/index.html からダウンロードします。
installウィザードにそってインストールしてください。
完了後以下のようにAndroid Studioの設定を行います。
- [Projects] -> [More Actions] -> [SDK Manager]をクリック[SDK Platforms]タブの右下の[Show Package Details]にチェック
- [Android 12.0 (S)]内の[Android SDK Platform 31]、[Google APIs ARM 64 v8a System Image]にチェックを入れる
- [SDK Tools]タブの右下の[Show Package Details]にチェック
- [Android SDK Build-Tools]内の[31.0.0]にチェックを入れる
- [Apply]をクリックしインストール
こちらはデバイスの設定です。
- [Projects] -> [More Actions] -> [Virtual Device Manager]をクリック
- [Create device]をクリックし、任意のデバイスを選択し[Next]をクリック
- [S] -> [31]を選択し、[Next]をクリック
- [Finish]をクリック
Android SDKのパスを通す必要があるので、通します。環境によってはzshをbashに変えてください。
$ echo 'export ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.zshrc
$ echo 'export PATH=$PATH:$ANDROID_HOME/emulator' >> ~/.zshrc
$ echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools' >> ~/.zshrc
$ source ~/.zshrc
これでAndroidの開発環境も完了です。
プロジェクトを作成し、エミュレーターを起動する
npx react-native@latest initコマンドからプロジェクトを作成します。
$ npx react-native@latest init ReactNativeTest
$ cd ReactNativeTest
$ npm run start
ここまでで、エラーが出なければ問題なく構築完了です。お疲れ様でした。
Androidで起動したい場合は以下で自動的に起動します。
$ npm run android
IOSで起動したい場合は以下です。
$ npm run ios
最後に
react-native-cliでの構築はX CodeやAndroid Studioが必要だったりで少し複雑でした。
私もとりあえずAndroidだけで構築したときにIOS関連のパッケージがなかったので最初のプロジェクト作成でエラーが出た時はめんどくさって思いました。
それではここまで読んでいただきありがとうございました。また機会があればお会いいたしましょう。