【React Native】生成したreact-nativeプロジェクトがiOSで起動できなかった件

9103 ワード
Android iOS react-native AndroidStudio Xcode Android テキストリンク

はじめに

React Nativeを試してみようとインストールしてみたものの、生成したreact-nativeプロジェクトがiOSで正しく動かなかったので、その対処メモ。

実行環境

  • Xcode 12.1
  • Android Sudio 3.2.1
  • macOS Catalina（10.15.7）

React Nativeのインストール

環境設定は、記事に日付も新しいのでこちらのサイトを参考にしながら行いました。

※私の環境には、Homebrew、Nodejs、Xcode、Cocoapods、Android Studioは導入済みなのでインストールしていません。

1.Watchmanのインストール

brew install watchman

2.React Native CLIのインストール

npm install -g react-native-cli

3.JDK(Java Development Kit)のインストール

brew tap AdoptOpenJDK/openjdk

brew cask install adoptopenjdk8

iOSシミュレーターで正しくアプリが起動しない

セットアップが終わったので、iOSアプリを起動してみます。

cd SampleApp
npm run ios

simulatorが起動し、アプリがロードされて。。。
と、参考サイトとは違い、こちらのサイトのような赤い画面にエラーが。メッセージはURL以降は違っててこんな感じ。

で、アプリ起動時のコンソールを見てみると、watchmanで以下のようなメッセージが出てました。

020-11-01T21:54:49,874: [0x11ce00dc0] while computing sockname: failed to create /usr/local/var/run/watchman/c_geru-state: No such file or directory

Watchman:  watchman --no-pretty get-sockname returned with exit code=1, signal=null, stderr= 2020-11-01T21:54:49,874: [0x11ce00dc0] while computing sockname: failed to create /usr/local/var/run/watchman/c_geru-state: No such file or directory

色々調べてみると、こちらのサイトによれば、High Sierraから/usr/local の権限変更が出来なくなったらしい。試してみると、確かにターミナルでも、Finderでも権限がないと怒られて変更できない。

遡ってインストール時のログを確認すると、Watchmanのインストール時に同じ「No such file or directory」のログが表示されていました。おそらくWatchmanインストール／起動時に必要なディレクトリが生成できず、アプリが正常に起動できなかったようです。

同じサイトによれば「/usrl/local/以下のディレクトリでは権限変更、作成が出来る」と書かれていたので、/usr/local/var/ のadminの権限を読み/書きに変更しました。

無事プロジェクトが表示されました！

Androidでの起動

Androidは、事前にシミュレーターを起動する必要があるとのことで、「Android Studioの起動画面右下の「Configure」＞「AVD Manager」を選択して...」と書かれているんだけど、AVD Managerが見当たらない。


いろいろ調べてみたけど、なぜ表示されていないのかわからず...。

起動画面の「Start a new Android Studio project」 から新規プロジェクトを生成してみると、AVD Manager自体はインストールされていたので、ここから起動してシミュレーターを立ち上げてから

npm run android

で無事起動しました。

まとめ

/usr/local の権限は意外な落とし穴でした。同じようなトラブルが出てる方の参考になれば。

以下、参考リンクです。