本記事は、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
成功すると画面が表示されるはずです。
参考記事
以下の記事を本記事執筆時に参考にさせていただきました。先人の知識様様です！！