expoを使う最初の環境構築

2885 ワード
reactnative react-native expo reactnative テキストリンク

実施環境

  • Mac Mojave使用
  • vscode使用
  • node.jsインストール済み

はじめに

https://expo.io にアクセス
[Get Start]ボタンで始める

00 Sign in

ページ右上の[Sign in]ボタンよりユーザ名、メールアドレス、パスワードを入力

01 Fall in Love

[Try Snack]ボタンを押下するとチュートリアル画面が表示される
右側がシュミレーターになっているので実装内容が確認できる
試しに15行目の「Change code〜」の文を変更してみると、右のシュミレーター画面も変わっていることが確認できる

02 Download NodeJS

NodeJSをインストールします
今回は導入済みの想定なのでスキップします

03 Get the command line tool

$npm install expo-cli --global
：expo-cliをインストール
React Nativeのプロジェクト作成・ビルド・デプロイが簡単にできるようになります

$expo --version
:expoのバージョンを確認
下記のようにバージョンが表示されていればインストール完了です

$ expo --version
3.21.10

ログインが完了したら
$expo login
:expoにログインする
ナビ通りにUsernameかEmail AddressとPasswordを入力する
下記のように表示されればOK

Success. You are now logged in as ユーザー名.

04 Create your first project

$expo init myNewProject
:React Nativeプロジェクトを作成
("myNewProject"の部分は自分のつけたいプロジェクト名に変更してください)

? 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

とテンプレートに関する質問がされます

簡単にexpoのサポートを受けながら開発したい場合はManaged workflowを選択
*blank画面がまっさら(blank)な状態からスタート
*tabsいくつか画面にタブがある状態からスタート
今回はManaged workflowのblankを使用とEnterキーを押すと必要なもののインストールが始まります

インストールが完了したら
$cd myNewProject

$expo start
:実行

左下にQRコードの表示されたブラウザが起動すればOK