プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【mac】react native cliでのnativeアプリ開発環境構築

はじめに

公式のdocを参考に、react native cliでのnativeアプリ開発環境構築をやっていきます。

react nativeの環境構築にはお手軽なexpo cliとreact native cliがある。
今回は後者で、macを使って環境構築をしていきます。

1.導入準備

mac初心者なので必要だった工程1から10まで全て書いていきます。

brew install node

上記は公式docにある一番初めの手順です。
ターミナルで上記のコマンドを打ち込んでみて、インストールが走った方は2.
導入準備 へ。brewコマンドが見つからないと表示された方はこのまま先を読んでください。

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 doctor

2.導入

1のでbrewコマンドが使えるようになったので、改めて以下のコマンドを実行します。

brew install node
brew install watchman

nodeとnpmのバージョン確認

node -v
npm -v

react-native-cliのパッケージをインストール

npm install -g react-native-cli

プロジェクトの作成

react-native init projectname

実行

cd projectname
react-native run-ios

以上でreact-native-cliのプロジェクトは立ち上がるが、肝心のエミュレータ環境がないので続けて設定していく。

3.iOSエミュレーターの環境構築

Xcodeのインストール

AppStoreからインストール

https://apps.apple.com/us/app/xcode/id497799835?mt=12

Xcodeの設定

画面上部の「Xcode」>>「Preferences…」>>「Command Line Tools」でXcodeの最新バージョンを指定

エミュレーターでプロジェクトを実行する

react-native run-ios

発生したエラー

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