React Nativeの開発環境を整えようと思ったら結構つまづいた話

React

業務でReact Nativeを触ることになりそう。
なので、最近話題になったこの本を買ってみた。

React Native ~JavaScriptによるiOS/Androidアプリ開発の実践
「iOS/Androidの2つのアプリをもっと効率良く開発したい」 「ハイブリッドアプリだと,速度やUIがネイティブより劣ってしまいがち」 こんな課題は,React Nativeを使えば解決できます。 React Nativeは,iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJav...

前評判もなかなか感じが良さそうだったので、迷わずポチり

【書評】2020年にReact Nativeを始めるときの決定版的技術書が出ます! - フロントエンドの地獄
「React Native ~JavaScriptによるiOS/Androidアプリ開発の実践」の書評になります。 PDF版はこちらで先行発売開始していて、 gihyo.jp 紙の本は2020/5/20から販売の予定です。 React Native ~JavaScriptによるiOS/Androidアプリ開発の実践作者...

斜め読みしてみた感じでは、良書な雰囲気。
しかしながら、React Native のセットアップでだいぶエラーに遭遇したので、記事にしておこうと思います。(つまづいた部分だけ抜き出しています)

anyenv の辺り

nodenvをインストールするのに、anyenv を使いますが、以下のようなエラーに遭遇しました。

anyenv definition not found: nodenv

この辺は、以下記事を読めば大体なんとかなると思います。

anyenv から入れた nodenv で Node.js を入れたときのメモ - Qiita
本記事について 「りあクト!」1を読みはじめ、本のように「anyenv 経由で ndenv をインストールして、ndenv で Node.js をインストール」しようと思ったら、anyenv で ndenv をインストールできな...

やったことは2つ

  • eval "$(anyenv init -)"~/.bash_profile に書いてくれと怒られたので、それを実施
  • anyenv install --init を実行

Java8のインストール

brew cask install adoptopenjdk8

だと、インストールできなかった。

Error: Cask adoptopenjdk8 exists in multiple taps:
  caskroom/versions/adoptopenjdk8
  adoptopenjdk/openjdk/adoptopenjdk8

エラーでググってみると、下記記事を発見。

HomeBrew で AdoptOpenJDK をインストールしてみた(訂正版) - Qiita
追記(2019/11/28) 下記の衝突も一段落したようなので、HomebrewでインストールできるJDKをまとめました。

なんだか名前の衝突をしているみたい。adoptopenjdk8を入れたかったので、下記でインストール

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

これで解決です。

pod install でエラー

npx react-native init MyApp でプロジェクトを作成しようとしたのですが、エラーでこけてしまう。

✔ Downloading template
✔ Copying template
✔ Processing template
✖ Installing CocoaPods dependencies (this may take a few minutes)
✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./MyApp/ios && pod install".
CocoaPods documentation: https://cocoapods.org/

言われた通りに、 pod install を試してみましたが、またもエラー

cd ./MyApp/ios && pod install
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies

# 〜中略〜

xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'
/Users/username/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-1f3da/missing: Unknown `--is-lightweight' option
Try `/Users/username/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-1f3da/missing --help' for more information
configure: WARNING: 'missing' script is too old or missing
configure: error: in `/Users/username/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-1f3da':
configure: error: C compiler cannot create executables
See `config.log' for more details

何やらよくわからんエラーが出てきました。
ので、ちょっと原因を探るべく、 npx react-native doctor を実行

npx react-native doctor
Common
 ✓ Node.js
 ✓ yarn
 ✓ Watchman - Used for watching changes in the filesystem when in development mode

Android
 ✓ ANDROID_HOME
 ✓ Android SDK - Required for building and installing your app on Android

iOS
 ✖ Xcode - Required for building and installing your app on iOS
   - Version found: N/A
   - Version supported: >= 10.x
 ✓ CocoaPods - Required for installing iOS dependencies
 ✓ ios-deploy - Required for installing your app on a physical device with the CLI

Errors:   1
Warnings: 0

Usage
 › Press f to try to fix issues.
 › Press e to try to fix errors.
 › Press w to try to fix warnings.
 › Press Enter to exit.

むむむ、Xcode の Version found N/Aだと、、
Xcode は入れているはずなのに、、、

Xcode command line tools

ここで、Command Line Tools for Xcode が怪しいと思い、以下記事を参考にインストールしました。

HomeBrew で AdoptOpenJDK をインストールしてみた(訂正版) - Qiita
追記(2019/11/28) 下記の衝突も一段落したようなので、HomebrewでインストールできるJDKをまとめました。

でも、もしかしたらこれは必要なかったかも、、、

pod install でのエラー解決

上記までの作業で、まだ pod install がこけるので、エラーメッセージでググってみると、以下の記事を発見

[0.54.0] IOS pod install error. Module glog cannot be installed · Issue #18408 · facebook/react-native
I'm trying to upgrade from 0.42.0 to 0.54.0. When I run pod install I receive an error: users-MacBook-Pro:ios stsiushkevich$ pod install Analyzing dependenc...

なにやら、以下コマンドを実行すれば解決するとのこと

sudo xcode-select --switch /Applications/Xcode.app

Command line tools の パスを明示的にするということでしょうか。

ここまでやって、再度 pod install を実行してみたら、、うまいこといきました!

あとがき

おそらく執筆時点とは状況が異なるからこのようなエラーが起こるのだと思いますが、、時代の流れは早いですね。
環境構築した感想としては、、アプリ開発の環境構築って重たいですね、、

タイトルとURLをコピーしました