Expo CLIをインストール/ネイティブアプリ作成/プロジェクト実行までを行ってみます。
Expo CLIとは、React Nativeの開発環境です。
■PC環境
・Windows10、Administrator（管理者）アカウント（Java SDK と Android SDK の環境変数パスを設定済み）
・node version 14.15.0
・npm version 6.14.8
■インストールする
ウインドウを閉じた後に、新しいアプリケーションを作成するために、Windows10のデスクトップ画面の検索ボックスで「コマンドプロンプト」と入力します。
入力すると、「最も一致する検索結果」に「コマンドプロンプト」が表示されますので、こちらをクリックします。クリックすると、コマンドプロンプトが起動します。
npm install -g expo-cli
起動後、上記のコマンドを入力し、Enterキーを押します。
npm WARN deprecated @hapi/joi@17.1.1: Switch to ‘npm install joi’
npm WARN deprecated @hapi/pinpoint@2.0.0: Moved to ‘npm install @sideway/pinpoint’
npm WARN deprecated @hapi/formula@2.0.0: Moved to ‘npm install @sideway/formula’
npm WARN deprecated @hapi/address@4.1.0: Moved to ‘npm install @sideway/address’
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated joi@11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated topo@2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).> @expo/traveling-fastlane-linux@1.15.1 preinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\traveling-fastlane-linux
> node platform.jsDoes not seem like WSL enabled on this machine. Download a Linux distro from the Windows Store, run it at least onceand then make sure to run in an admin powershell:
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
C:\Users\Administrator\AppData\Roaming\npm\expo-cli -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\expo-cli\bin\expo.js
C:\Users\Administrator\AppData\Roaming\npm\expo -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\expo-cli\bin\expo.js> core-js@2.6.11 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\expo-cli\node_modules\babel-runtime\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> core-js@3.7.0 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\expo-cli\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/traveling-fastlane-darwin@1.15.1 (node_modules\expo-cli\node_modules\@expo\traveling-fastlane-darwin):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/traveling-fastlane-darwin@1.15.1: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-x64@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-linux-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-x64@2.2.8: wanted {“os”:”linux”,”arch”:”x64″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-freebsd-x64@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-freebsd-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-freebsd-x64@2.2.8: wanted {“os”:”freebsd”,”arch”:”x64″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-darwin-ia32@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-darwin-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-darwin-ia32@2.2.8: wanted {“os”:”darwin”,”arch”:”ia32″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-arm@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-arm@2.2.8: wanted {“os”:”linux”,”arch”:”arm”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-sunos-x64@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-sunos-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-sunos-x64@2.2.8: wanted {“os”:”sunos”,”arch”:”x64″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-ia32@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-linux-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-ia32@2.2.8: wanted {“os”:”linux”,”arch”:”ia32″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-freebsd-ia32@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-freebsd-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-freebsd-ia32@2.2.8: wanted {“os”:”freebsd”,”arch”:”ia32″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-darwin-x64@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-darwin-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-darwin-x64@2.2.8: wanted {“os”:”darwin”,”arch”:”x64″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-arm64@2.2.8 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-arm64@2.2.8: wanted {“os”:”linux”,”arch”:”arm64″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-win32-ia32@2.2.8-beta.1 (node_modules\expo-cli\node_modules\@expo\ngrok-bin\node_modules\@expo\ngrok-bin-win32-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-win32-ia32@2.2.8-beta.1: wanted {“os”:”win32″,”arch”:”ia32″} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\expo-cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {“node”:”<8.10.0″} (current: {“node”:”14.15.0″,”npm”:”6.14.8″})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\expo-cli\node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\expo-cli\node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN @expo/configure-splash-screen@0.2.1 requires a peer of expo-splash-screen@* but none is installed. You must install peer dependencies yourself.
npm WARN @pmmmwh/react-refresh-webpack-plugin@0.3.3 requires a peer of react-refresh@^0.8.2 but none is installed. You must install peer dependencies yourself.+ expo-cli@3.28.5
added 1934 packages from 839 contributors in 180.412s
Enterキーを押すと、インストールが開始され、完了となります。
■ネイティブアプリを作成する
C:\>expo init my-new-app
? 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 (TypeScript) several example screens and tabs using react-navigation and TypeScript
—– Bare workflow —–
minimal bare and minimal, just the essentials to get you started
minimal (TypeScript) same as minimal but with TypeScript configuration
インストール完了後、ネイティブアプリを作成しますので、コマンドプロンプトで上記の「expo init my-new-app」コマンドを入力し、Enterキーを押します。今回は「my-new-app」というネイティブアプリを作成します。
Enterキーを押すと、「Choose a template: (Use arrow keys)（テンプレートを選択:(矢印キーを使用する)）」と表示されます。
今回は「blank」のテンプレートを使用してみますので、「blank」に矢印キーをあわせてEnterキーを押します。
? Choose a template: expo-template-blank
√ Downloaded and extracted project files.🧶 Using Yarn to install packages. You can pass –npm to use npm instead.
√ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following yarn commands.
– cd my-new-app
– yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
– yarn android
– yarn ios # requires an iOS device or macOS for access to an iOS simulator
– yarn web
Enterキーを押すと、プロジェクトファイルをダウンロードし、解凍されます。「Your project is ready!（プロジェクトの準備ができました。）」と表示されますので、これでネイティブアプリ（プロジェクト）の作成は完了となります。
■プロジェクトを実行する
ネイティブアプリ（プロジェクト）の作成が完了した後は、プロジェクトを実行してみます。
cd my-new-app
まず、cdコマンドで作成したプロジェクト「my-new-app」に移動します。
C:\my-new-app＞npm start
移動後、上記のコマンドを入力し、Enterキーを押します。
Enterキーを押すと、上記のような「http://localhost:19002」やQRコードが表示されます。またWebブラウザが自動的に起動します。
起動すると、Metro Bundler が表示され、プロジェクトが実行されます。
コメント