本記事は、React Native公式ドキュメントの手順に沿って、環境構築をするものです。英語に抵抗ない方は、公式ドキュメントを読んで環境構築してみてください。

動作環境

Mac OS X 10.14.6
React Native 0.62
Node v12.8.0

はじめに

React Nativeには２種類の開発ツールが用意されており、公式ドキュメントでは以下のように勧められています。

Expo CLI 　　　　　モバイル開発経験が初めての方におすすめ
React Native CLI　　モバイル開発経験がある方におすすめ

詳細な違いは、こちらのreact-native初学者が学習を始める前に知っておくべき6のtipsで取り扱っているので、興味ある方は一読してみてください！

今回は、筆者本人もモバイル開発経験が無いため、Expo CLIで環境構築を行ってみます。

開発環境構築(Expo CLI)

Expo CLI コマンドラインのインストール

$ npm install -g expo-cli

Unhandled rejection Error: EACCES: permission denied

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>

エラーだと、、、このエラーになった方はこちらを参考に sudo chown -R $(whoami) ~/.npm を実行してから、再度installを実行してみてください。

インストールが完了できたか確認してみましょう。

$expo --version
ERROR: Node.js version 11.12.0 is no longer supported.

expo-cli supports following Node.js versions:
* >=10.13.0 <11.0.0 (Active LTS)
* >=12.0.0 <13.0.0 (Active LTS)
* >=13.0.0 <14.0.0 (Current Release)

またエラーだと、、、どうやらバージョンに問題があるらしい。

$ nodebrew use v12.8.0
use v12.8.0

$ nodebrew ls
v8.9.4
v11.12.0
v12.8.0

current: v12.8.0

よし！あとは次のコマンドを打つだけです。

$ expo init AwesomeProject
zsh: command not found: expo

なぜだ、、、
どうやらPATHが通ってなかったみたいです。筆者はzshですが、bashの方は~/.bash_profileにPATHを通しておいてください。
react-native: command not found

$ echo 'export PATH="/usr/local/Cellar/node/13.5.0/bin/:$PATH"' >> ~/.zshrc

再度、expo init AwesomeProjectを実行すると・・・

$ expo init AwesomeProject
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

やっとうまくいきましたね！！

Managed WorkflowとBare Workflowの違いはドキュメントに記載されています。

特徴	Managed workflow	Bare workflow
JavaScript / TypeScriptのみでユニバーサルアプリを開発する	✔
Expoを使用してiOSおよびAndroidをビルドをする	✔
Expoのプッシュ通知サービスを使用する	✔	✔
Expoの無線アップデート機能を使用する	✔	✔
Expoクライアントアプリで開発す	✔	✔
Expo SDKへのアクセス	✔	✔
カスタムのネイティブコードを追加し、ネイティブの依存関係を管理する		✔
XcodeとAndroid Studioで開発する		✔

ドキュメントで説明されているように、初心者はManaged workflowの仕様が勧められています。

あとはディレクトリを移動し、起動させるだけです。

$ cd AwesomeProject
$ yarn web // yarn ios or yarn android

成功すると画面が表示されるはずです。

参考記事

以下の記事を本記事執筆時に参考にさせていただきました。先人の知識様様です！！

react-native初学者が学習を始める前に知っておくべき6のtips