【React Native】環境構築・コマンド

新しいプロジェクト作成

npx react-native init MyApp

依存パッケージをインストール

cd MyApp

yarn

ネィティブ層における依存パッケージをインストール

cd ios

pod install —repo-update

必要なツールがインストールされているかチェック

npx react-native doctor

バージョン確認

react-native info

起動（いろいろある）

yarn react-native run-ios

react-native run-ios --simulator "iPhone 11"

npx react-native run-ios

 （参考）npx の良いところ

github gistにあげているパッケージがあるとして、以下のコマンドを打つと、インストールなしで実行できる 

qiita.com

以下は非推奨かもしれない（react-native-cli）

npm install -g react-native-cli

アンインストールする場合

npm uninstall -g react-native-cli

Androidエミュレータ確認（もしくは、Android端末を直接USB接続できてるか確認）

adb devices

※Android端末を直接USB接続して認識されてる場合は

  Android Studioからインストール可能

（キャッシュのクリア関連）

# watchmanのキャッシュを削除
watchman watch-del-all

# iosのビルドファイルを削除
rm -rf ios/build

# androidのビルドファイルを削除
rm -rf android/app/build

# node_modulesを削除
rm -rf node_modules

# Podsファイルを削除
rm -rf ios/Pods

# Xcodeのキャッシュを削除
rm -rf ~/Library/Developer/Xcode/DerivedData

# yarnをインストール
yarn install

# podをインストール
cd ios
pod install

# androidのビルド環境をクリア
cd ../android
./gradlew clean cleanBuildCache

# metro bundlerを再起動
cd ..
yarn start -- --reset-cache

# metro bunlderが起動したらControl + Cでmetro bundlerを落とす
（参考）

qiita.com

Metro Bundler

（ツール）

ターミナル上で動作する

アプリを起動する際、同時に起動されサーバとして動作

すべてのファイルを１つにまとめて返却（１つのJavaScriptファイルにまとめることをバンドルと呼ぶ）

Metro Bundlerの注意点

ディレクトリ名変更・ソースファイルのディレクトリ移動すると

キャッシュ古いままで更新されない場合あり

（対応）

Metro Bundlerを終了

以下を実行

npx react-native start —reset-cache

（参考）

https://www.amazon.co.jp/React-Native-%EF%BD%9EJavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS%EF%BC%8FAndroid%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8-%E5%81%A5%E4%BB%8B-ebook/dp/B088BLSH9V/ref=pd_vtp_351_1/355-2959510-2123527?_encoding=UTF8&pd_rd_i=B088BLSH9V&pd_rd_r=613f177a-e621-49ba-8c42-54cb405386b3&pd_rd_w=tnUmu&pd_rd_wg=Vr3Yq&pf_rd_p=c908b90e-c601-4103-95b3-a2b18c6827f0&pf_rd_r=QECH3BNVKZY5ECJ1TDVB&psc=1&refRID=QECH3BNVKZY5ECJ1TDVB

キャッシュクリア

lsof -n -P -i :8081 -t | xargs kill

rm -rf ios/build

rm -rf android/app/build

rm -rf node_modules

yarn