「Expo CLI」をインストールしてアプリを起動してみる

前提

Node.jsのインストール
Node.jsのインストール(翻訳)

Expo CLIをインストール

npm install --global expo-cli

file

実行結果

file

プロジェクトの作成

cd プロジェクトを作りたい場所
expo init

アプリ(プロジェクト)の名前を入力

? What would you like to name your app? » my-app

ワークフローとJavaScriptかTypeScriptかを決める

? Choose a template: » - Use arrow-keys. Return to submit.
    ----- 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

ワークフローはManagedでよいと思いますが、気になる人は以下の公式を読んでください。
https://docs.expo.io/introduction/managed-vs-bare/
JavaScriptとTypeScriptの違いは型(Type)をちゃんとするかしないかの違いです。

実行結果

file

_人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人_
> ここまでで実は文字を表示するだけのアプリケーションが作られました。 <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ ̄
※ビルドはされていません。

デバッグ用アプリをインストール

Expoのアプリをデバッグするのにアプリを入れると便利なのでインストールしましょう。
expo
Android

https://play.google.com/store/apps/details?id=host.exp.exponent&hl=ja&gl=US

iOS

https://apps.apple.com/jp/app/expo-go/id982107779

デバッグを実行

作ったアプリへ移動してスタート

cd my-app
expo start

そうするとブラウザが開いて以下のような画面になります。
file

それを、ダウンロードしたデバッグアプリでQRを読み込むと、
作成されたプロジェクトのアプリが起動します。
※ちなみに同じネットワークにいないとだめです。スマホwifiつないで!!

実行結果

file
表示されたらApp.jsを適当にいじってみてください。
画面も連動して変更されます。
カッコ良い!!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です