頻繁に設定するものでは無いけど、貸与端末とかのセットアップ時のためにメモ。
ネイティブのコードを書くことがあるので、Expoではなく、ReactNative CLIの方をインストールする。
内容はほとんど公式サイトから引用
前提条件
- MacのバージョンはCatalina(10.15.7)
- Macの管理者権限が付与されているアカウントで実施
- HomeBrewはインストール済みである
iOS、Android共通点設定
1.Nodeのインストール
(nodeのバージョンを指定したい場合はnodebrewを入れる)
brew install node
2.Watchmanのインストール
brew install watchman
iOS設定
1. Xcodeのインストール
XCodeをインストールする
(Xcodeのバージョンに指定がある場合はApple Developerからxipファイルをダウンロードする) ※要Developerアカウント
2. コマンドラインツールのインストール
「Xcode」を開き、メニューの「Xcode」-「Preferences...」-「Locations」を選択し、「Command Line Tools」がXcodeのバージョンと同じものをインストールする
3. シミュレーターのインストール
「Xcode」を開き、メニューの「Xcode」-「Preferences...」-「Components」を選択し、使用するシミュレーターをインストールする
4. CocoaPodsのインストール
sudo gem install cocoapods
Android設定
1. JDKのインストール
RNの公式サイトにはJDK8以降なら大丈夫と記載されているが、14だとAndroidビルド時にエラーになるらしい。 (公式サイトのインストール手順は8になっている)
brew cask install adoptopenjdk/openjdk/adoptopenjdk8
2. Android Studioのインストール
Android Studioをダウンロードして、インストールする
インストール時に以下をチェックボックスの以下を選択する
- Android SDK
- Android SDK Platform
- Android Virtual Device
- Performance (Intel ® HAXM) (Hyper-V未使用の場合)
3. Android SDKのインストール
ReacrNativeでネイティブコードを書くには「Android 10 (Q)」が必要らしい
Andoroid Studioを開き、メニューの「Andoroid Studio」-「Preferences...」-「Appearance & Behavior」-「System Settings」-「Android SDK」を選択する。
「SDK Platforms」タブからAndroid 10 (Q)を選択し、右下のチェックボックス「Show Package Details」にチェックを入れパッケージの中身を表示する。
以下にチェックが入っていることを確認する (デフォルトで入ってないものが多いので注意)
- Android SDK Platform 29
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
- Google Play Intel x86 Atom System Image (エミュレータで使用するっぽい)
「SDK Tools」タブの右下のチェックボックス「Show Package Details」にチェックを入れパッケージの中身を表示し、「AndroidSDKBuild-Tools」内の「29.0.2」にチェックが入っていることを確認する
4. エミュレータのインストール
Android Studioを開き、「AVD Manager」から「+ Create Virtual Device...」ボタンを押下し、好きな端末を選択して「Next」を押下し、「System Image」でQ(API Level 29)を選択する
5. 環境変数(ANDROID_HOME)の設定
~/.zshrcに以下を記述する
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. コマンドでプロジェクトを作成
(TypeScriptで作成する場合、コマンドの後ろに「--template react-native-template-typescript」オプションを指定)
npx react-native init AwesomeProject
2. プロジェクトフォルダ(AwesomeProject)内でメトロを実行
cd AwesomeProject
npx react-native start
3. iOSを起動
メトロを実行したターミナルとは別のターミナルから、プロジェクトフォルダ内で以下を実行
npx react-native run-ios
4. Androidを起動
プロジェクトフォルダ内で以下を実行
npx react-native run-android
シミュレーター(エミュレーター)でアプリが起動出来れば設定完了