Special Thanks とても参考になったページ
HomebrewとCocoapodsのインストール
HomebrewとCocoapodsの入れ方は過去記事のこちら
Node.jsのインストール
nodebrew経由でインストールしたほうがいいっぽいのでまずはnodebrewをインストール
brew install nodebrew
終わったらバージョン確認、数字が出ればOK
nodebrew -v
nodebrew経由でNode.jsをインストール
nodebrew install-binary stable
※Warning: Failed to create the fileというエラーが出た場合
mkdir -p ~/.nodebrew/src
まず上記を入れてから
nodebrew install-binary stable
終わったら以下で確認
nodebrew ls
v20.0.0 current: none がでていた場合
nodebrew use v20.0.0 (←直前に表示されていたバージョンを設定)
もう一度nodebrew lsで確認すると v20.0.0 current: v20.0.0 となっていた
環境パスを設定
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
環境パスについて詳しくは過去記事
一度ターミナルを再起動してインストール確認
node -v
数字が出れば完了
watchmanのインストール
インストール
brew install watchman
確認
watchman –version
iOSのためのxcodeのインストールと設定
xcodeのインストール方法は割愛します。バージョン10以降が必要とのこと。
xcodeを起動したら
ツールバーのSetting > location タブで Command Line Toolsに最新のものが設定されいることを確認
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/376396dd1197646eca84c959f9264050-1024x676.png)
Android Studioのインストールと設定
JDKをインストール
brew install --cask adoptopenjdk/openjdk/adoptopenjdk11
確認
java -version
javac -version
Android Studioのインストール
公式ページからダウンロードしました
インストール方法はこちらの記事が参考になります!
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/b5cdddf4d558fd7dc47201dc51d714b3-569x1024.png)
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/84ecebae9718ef4b413252077e63cc1c-1024x870.png)
インストールしたら、ホーム画面でMore ActionsからSDK Managerを選択
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/2e4c512fde1af1f6afc03f6db92647e4-1024x832.png)
開いたら左メニューでSDK Platformsを選ぶ。
SDK Platform タブで
右下の「Show Package Details」にチェックを入れ以下の選択
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/62f6b21518a34884a743b0bdffcc8052-1024x244.png)
SDK Toolsタブでは以下の選択
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/997f87dff45d8f22444318c9f4013fba-1024x289.png)
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/63af4eea3811d6454ea1b5fcd8235c49-1024x446.png)
「Apply」を押して完了
環境変数の追加
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
環境パスについて詳しくは過去記事
プロジェクトの実行
1、ターミナルでプロジェクトを作成するフォルダへ移動
2、以下で実行
npx react-native init [プロジェクト名]
※react-native-cliよりも最新はnpx推奨とのこと。もしもreact-native-cliが入っている場合は不具合の原因になるのでアンインストールしておく。
3、ターミナルでプロジェクトを作成したフォルダへ移動
4、以下で起動確認
iOS
npx react-native run-ios
↓
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/ab4e354841e8d788a702bdf998ee3782-463x1024.png)
Android
npx react-native run-android
↓
![](https://techblog.unitedcube.com/wp-content/uploads/2023/04/2519740e5a807b4b2f0e3c63a6b65f19-522x1024.png)
コメント