tech1000+

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

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

nativeアプリ
目次

はじめに

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

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

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

１．導入準備

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