はじめに
公式のdocを参考に、react native cliでのnativeアプリ開発環境構築をやっていきます。
react nativeの環境構築にはお手軽なexpo cliとreact native cliがある。
今回は後者「react native cli」で、macを使って環境構築をしていきます。
mac初心者なので必要だった工程1から10まで全て書いていきます。
1.導入準備
react-native cliをインストールするには、nodeをインストール。nodeをインストールするbrewコマンドを打つためには、Homebrewが必要です。
さらにHomebrewをインストールするには、Xcode の Command Line Toolsが必要なようなので、順にインストールしていきます。
※Homebrewはmacで使うことができるパッケージマネージャです。
①Xcode の Command Line Tools
インストール
xcode-select --install
インストールの確認
xcode-select -v
②Homebrew
インストール
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
公式サイトにもコマンドが載っています。
https://brew.sh/index_ja.html
Homebrewインストールの確認コマンド
brew -v
①を飛ばしても②で「Xcode の Command Line Toolsがない場合はインストール」をしてくれます。
③Node.jsのインストール
brewコマンドが使えるようになったので、以下でnode.jsをインストールしていきます。
単にnode.jsをインストールする場合はA、複数プロジェクトでnode.jsのバージョンを切り替える必要がある場合はBを実行します。
※どちらも後からやり直すことは容易ですが、どうせなら②をやっておいたほうが無難。
A.Node.jsをインストール
brew install node
B.パッケージ管理のnodebrew経由でNode.jsをインストール
brew install nodebrew
nodebrewのバージョン確認
nodebrew -v
インストールできるnode.jsのバージョンを確認
nodebrew ls-remote
任意のnode.jsのバージョンを指定してインストール
nodebrew install-binary v12.8.0
インストールしたnode.jsの一覧を確認
nodebrew ls
インストールしたnode.jsのバージョンを使用するように設定
nodebrew use v12.8.0
※ディレクトリがありません~のようなエラーが出た場合
mkdir -p ~/.nodebrew/src
パスを通す(A,Bどちらの場合でも必要)
nodeコマンドを使えるように環境パスを通す。
mac osがCatalinaの場合は以下
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
ターミナルを再起動し、以下が確認ができればOK
nodeとnpmのバージョン確認
node -v
npm -v
④watchmanをインストール
react-nativeが使うwatchmanをインストール
brew install watchman
2.react-nativeの準備
①react-native-cli
react-native-cliのパッケージをインストール
npm install -g react-native-cli
確認
react-native --version
②Cocoapodsのインストール
react-nativeでiOSアプリを開発する際に必ず必要
sudo gem install cocoapods
確認
pod --version
※Cocoapodsがうまくインストールできない場合はXcodeでCommand Line Toolsの設定がされていない可能性があります。
XcodeのPreferences>>LocationsからCommand Line Toolsを設定しましょう
③JDKのインストール
次はAndroidで必要なJDK(Java Development Kit)をインストールします
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8
確認
java -version
javac -version
3.エミュレーターの準備
①AndroidStudioのインストール
エミュレーター用にAndroidStudioをインストールします
https://developer.android.com/studio
AndroidStudioの設定
Performance (Intel ® HAXM)
とAndroid Virtual Device
を選択
SDK設定
Androidのバージョンに合わせてSDK設定から各imageをダウンロードします。
環境変数設定(~/.zshrc)
# export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_HOME=SDKパス/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
②Xcodeのインストール
AppStoreからインストール
https://apps.apple.com/us/app/xcode/id497799835?mt=12
Xcodeの設定
画面上部の「Xcode」>>「Preferences…」>>「Command Line Tools」でXcodeの最新バージョンを指定
4.プロジェクトの作成
react-native init projectname
reactnativeの環境がもろもろできあがり、ios用のディレクトリやandroid用のディレクトリも生成される。
5.プロジェクトの実行
①iOS
cd projectname
react-native run-ios
②android
react-native run-android
6.発生したエラーなど
buildディレクトリを作る権限がない
私の環境では一発では起動しませんでした。最初に発生したエラーは以下
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening ***.xcodeproj
さらに下のほうに
You don't have permission to save the file "Build" in the folder...
buildディレクトリを作成する権限がなくエラーとのことだったのでsudoで実行すると解消しました。
“CFBundleIdentifier”, Does Not Exist
Xcode上でプロジェクトの設定を変更する(以下リンク先記載)という解決方法が検索上多かったが、私の環境ではそれだけでは解消せず。
react-native upgradeコマンドを実行するとbuildが通るようになりました。
https://www.haneca.net/react-native-cfbundleidentifier-error/
‘config.h’ file not found
手動でスクリプトを実行することで解消
$ cd node_modules/react-native/third-party/glog-0.3.4
$ ../../scripts/ios-configure-glog.sh