🦁
React Native Expoでアプリを作ろう(1)
その1:Expoをインストールして実機で確認
Expoとは
Expoは、React Nativeというツールを使って、スマートフォンのアプリを作る時に役立つツールキットです。React Nativeは、JavaScriptというプログラミング言語を使って、iPhoneやAndroidのアプリを作ることができる技術です。
Expoの特徴
- セットアップが簡単：Expoを使用すると、React Nativeの環境設定が簡単になります。多くの複雑な設定を自動的に処理し、開発をすぐに開始できます。
- Expo SDK：Expoには、カメラ、加速度計、通知など、多くのネイティブAPIへのアクセスを提供する独自のSDKが含まれています。
- Expo Goアプリ：このアプリを使うと、コードの変更をリアルタイムでデバイス上で確認できます。QRコードをスキャンするだけで、開発中のアプリをテストできます。
- OTAアップデート（Over-the-Air）：アプリをアプリストアに再提出することなく、直接最終ユーザーのデバイスにアップデートを配信できます。
Expo Goのインストール
スマートフォンに「Expo Go」アプリをインストールし、QRコードをスキャンすることで、開発中のアプリを実際のデバイスでテストできます。
App Store
Google Play
Node.jsのインストール:
Expoを使うには、まずコンピュータにNode.jsがインストールされている必要があります。Node.jsの公式ウェブサイトhttps://nodejs.org/から最新版をダウンロードしてインストールしてください。
Expo cliのインストール
グローバルにExpo cliをインストールします。
npm install -g expo-cli
ステップ1: 新しいプロジェクトの作成
プロジェクトを作成したいディレクトリに移動してから、以下のコマンドを実行します。
expo init プロジェクト名
ステップ2: プロジェクトディレクトリに移動
以下のコマンドで新しく作成したプロジェクトのディレクトリに移動します。
cd プロジェクト名
ステップ3:開発サーバーの起動
以下のコマンドを実行して、開発サーバーを起動します。
expo start
次の様な画面が表示されます。
iPhone場合はカメラでQRコードを読み込んでリンクをクリックするとExpo Goが起動します。
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀▀▄▄▄██ █ ▄▄▄▄▄ █
█ █ █ ███▄█ ▀▄▄█ █ █ █
█ █▄▄▄█ ██▄▀▄▀▄██▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█ █ ▀▄▀▄▀ █▄▄▄▄▄▄▄█
█▄ █ ▄▀▄▀█ ▄▄▀▀█▀ █▄█▀█▀▀▄█
█ ▄▄▀▀█▄ ▀▀ ▀▄▄▄▀▀███▄▀▀ █
█▀█▄▄▄▀▄█ ▄█▄▄▀▄ █ ▄▀▀█▀ ██
█ ▄▀ ▀ ▄ ▄▀█ ▄▄█ ▄▀ ██▄▀ █
█▄██▄█▄▄█▀ ▀▀ █ ▄▄▄ ▄▀▄█
█ ▄▄▄▄▄ ██▀ ▄ ▄█ █▄█ ██▀ █
█ █ █ █ █▀▀▀██▄ ▄ ▄ █▀▀█
█ █▄▄▄█ █▀▀▄ █▄ ▄█▀▀▄█ █
█▄▄▄▄▄▄▄█▄█▄▄██▄▄▄▄█▄▄███▄█
› Metro waiting on exp://192.168.0.169:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web
› Press r │ reload app
› Press m │ toggle menu
› Press ? │ show all commands
無事に表示されましたでしょうか？
今回はここまでとなります。
おつかれさまでした。🐤
参考URL
Tailwind.cssを利用するためのライブラリ Expo公式
Discussion