react native でサンプルアプリを立ち上げる🔭

前回は環境構築したので、今回のゴールは簡単なアプリっぽいものを立ち上げるまでとする⚔️

sampleProjectという名前のサンプルプロジェクトを作成するために下記コマンドを叩く。

と、沢山の選択肢が示される。

$ expo init sampleProject
? Choose a template: » - Use arrow-keys. Return to submit.
----- Managed workflow ----- // Expo のサポート下で開発できる（簡単）
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 ----- // Expo なしでの開発に近く、カスタマイズ性は上がる（難しい）
minimal bare and minimal, just the essentials to get you started

今回は勉強なので、１番しっかりしてそうな「複数の画面遷移ができる状態に」を選択。

結果↓

$ expo init sampleProject
√ Choose a template: » tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
✔ Downloaded template.
📦 Using npm to install packages.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd sampleProject
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web

で、立ち上げてみる。

$ npm start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> sampleproject@1.0.0 start
> expo start

Starting project at C:\Users\〇〇\Desktop\reactnative\sampleProject
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀▄█▀ █ ▄█ ▄▄▄▄▄ █
█ █ █ █▄ ▄███ █ █ █ █
█ █▄▄▄█ █ ▀█▀█ ▀ ██ █▄▄▄█ █
█▄▄▄▄▄▄▄█ ▀▄█ █ █▄█▄▄▄▄▄▄▄█
█ ▄█▄▀█▄ ██ ▀█▄▀▄▄▀ ▄▀▄▄▀█
█▄▄██▄▀▄ █▄▄██ ▄█▄▄▀ ▀▀█▄▄█
██▀ ▄▀█▄█▄█▀▀ ▄ █▀█ ▄█ ██▀█
█▄▀▄▀▄█▄ ▀▀▀█ ▀██ ▄▄ ▀▀██▄█
█▄▄▄██▄▄▄ ▄▄█▀▄ ▄▄▄ █ ▄ █
█ ▄▄▄▄▄ █▄ ▀▀██▄ █▄█ ▀▄ █
█ █ █ █▀ ▀▀▄ ▄▄ █▀█▄█
█ █▄▄▄█ █▀ █ █ █▄ ▄█▄█
█▄▄▄▄▄▄▄█▄█▄▄▄█▄█▄███▄▄█▄▄█

› Metro waiting on exp://192.168.3.9:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
Started Metro Bundler

↑のQRコードをスマホのExpoアプリでスキャンする。

すると、勝手に長いビルドが走り、

Android Bundling complete 43425ms
Android Running app on SH-M19

↑のようにスマホアプリが立ち上がる⚡

試しに、

<Text style={styles.title}>Tab One</Text>

↓に変換すると

<Text style={styles.title}>Hello android App</Text>

無事に文字が変更された。

簡単にアプリを立ち上げることができた💪