こんにちは。
スマホアプリを作成するフレームワークReact Nativeの公式ドキュメントを読んでいくシリーズ第2回は、環境設定です。
本記事の位置づけ
基本的に、公式ドキュメントの解説を上から順番に見て、ざっとまとめた記事です。
また、本ページは、下記公式ドキュメントの一番最初「The Basics」の部分をまとめた記事となります。
- Part1. The Basics
- Part2. Environment setup ←今ココ★
- Part3. Workflow
- Part4. Design
- Part5. Interaction
- Part6. Inclusion
- Part7. Performance
- Part8. JavaScript Runtime
- Part9. Connectivity
- Part10. Native Components and Modules
- Part11. Guides (Android)
- Part12. Guides (iOS)
なお、本ページに記載のソースコードはすべて上記サイトから引用したものとなります。
開発環境のセットアップ
- モバイル開発経験がない方は、ExpoCLIを使うのが便利
- ブラウザでぱっと動作を確認したい場合は、Snackを使うのが便利
- モバイル開発の経験がある方は、React Native CLIを使うのが便利(ここでは解説しない)
Expo CLIのセットアップ
1.Node.js(バージョン12 LTS以降)をインストール
2.npmでExpo CLIをインストール
npm install -g expo-cli
3.以下コマンドで"AwesomeProject"という名前のプロジェクトを作る
expo init AwesomeProject
cd AwesomeProject
npm start
npm startの代わりにexpo startでもよい
Expo CLI上でのアプリ実行
1.Expoアプリをスマホにインストールする(iOS、Android両方あり)
2.PCとスマホを同じWifiネットワーク上に接続する
3.Android:Expoアプリ上でPCのターミナル上のQRコードを読む
iOS:カメラアプリのQRコードリーダーでPCのターミナル上のQRコードを読む
4.アプリがスマホで実行される
5.メインファイルであるApp.jsの修正からしていきましょう！コードを修正すると自動的にスマホに反映されます。
困ったときのリンク
Expo CLI利用時の注意事項
- Expo CLIはネイティブコードを実行しているわけではないため、各プラットフォームのネイティブコードは実行できない
- 各デバイスのシミュレータや実機で動かしたい場合もExpo CLIは使えない
- 上記のような場合は、React Native CLI Quickstartを読んでネイティブ環境をセットアップするなり、ネイティブコードを"eject"するなどの必要がある。
- Expo CLIは最新のReact Nativeをフォローするため、どのバージョンをサポートしているかはバージョン依存のページを見てね。
既存アプリとの統合
すみませんが、この章は割愛します。
原文を読んでください。
TVデバイスとの統合
すみませんが、この章は割愛します。
原文を読んでください。
Android、iOS、Web以外のプラットフォーム
下記のプラットフォームに対応しているので、気になるものはぐぐってみてください。
実験的に対応しているだけのものもあるため、よく読んでから使うようにするとよいです。
- React Native Windows
- React Native DOM
- React Native Turbolinks
- React Native Desktop
- React Native macOS
- React Native tvOS
- alita
- Proton Native
また、好きなプラットフォームに独自に対応させることもできるようなので、こちらもドキュメントを参照してください。