M1 MacBookProにReact Native環境作ってみた

実行環境
・MacBook Pro (13-inch, M1, 2020)
・BigSur 11.4

・m1 mac bookなのでFinderからTerminal.appを右クリック->情報を見る->”Rossetaを使用して・・・”にチェックを入れる

nvs install -> node install

・nodeのバージョンを複数インストールして瞬時にバージョンを変更するためのツールnvsをインストールする

% export NVS_HOME=”$HOME/.nvs”
% git clone https://github.com/jasongin/nvs “$NVS_HOME”
% . “$NVS_HOME/nvs.sh” install

・念の為nvsのバージョンを確認

% nvs –version

・インストールが確認できたのでnvsの上にnodeをインストールしていく

% nvs add <node version>

・今回は14.15.0をインストールする

% nvs add 14.15.0

・インストール後node –versionでzsh command not foundって言われちゃったのでパス通す。
上記のnvs addした時にadded atの後にパスの記載があるのでそこから下記のようにパスを通す。

% export PATH=$HOME/.nvs/node/14.15.0/x64/bin:$PATH
% node -v

これで問題なくパスが通った。

・今度は色々便利らしいExpoさんをインストールしていく
こいつ使うと一度審査通したアプリの中身を再度審査しなくても変更できるらしい。

% npm show expo-cli

・最新バージョンを確認
lastest: 4.7.2

% npm install -g expo-cli@4.7.2
% expo –version

・Expoの会員登録
https://expo.io/

・Terminal上でExpoへのログイン
・念の為すでにログインしていないか確認

% expo whoami

してれば % expo logout

% expo login

・確認用のクライアントを準備する
具体的にはiPhoneにExpo Goをinstallする。

・Xcodeをインストール
※私はFlutter触ってるのでXcodeはインストール済みのため省略。特段難しくもないと思う。

・Android Studioをインストール
※こちらも同様に省略。M1 MacBookProで完全に保証されてるエミュレータは現状なさそうなので注意

・作業ディレクトリに移動する

% cd <work space>

・expoのプロジェクトを作成

% expo init –npm

任意のプロジェクト名をつけてblankを選びましょう。

your project is ready!って言われたらOK
lsで作ったプロジェクト存在するか確認してcdでその中に移動しましょう

・実際にプロジェクトを機動する

% expo start

これで開発者ツールが起動する

Run on IOS simulator押下でシュミレータが自動的に起動する。

マジでやばい！さっきiPhoneにExpo GoインストールしてたらiPhoneのカメラアプリで
expo開発者ツール右下のQRを読み込むとコードレスで開発中のプロジェクトが実機上で立ち上がる・・・・信じられない・・・。

一応以上でReact Nativeの環境自体はできています。
あとは好きにこのプロジェクトをいじってください。

jasongin/nvs

github.com

▼この記事がいいね！と思ったらブックマークお願いします