アプリ

過去にReact Nativeの環境構築はしたことがあるが(react native でアプリを作る環境構築をやってみるよ⚡)、それから随分と経つので、再度0からやってみる。 Expo Goの利用 モバイル開発が初めての場合はExpo Goの仕様が推奨されているので、それにならうことにする。 必要なのは、最新バージョンのNode.jsとスマホまたはエミュレータ。 React Native CLI という環境もあるが、Xcode またはAndroid Studioになるとのこと。 また初めてであれば環境構築に1時間を要することになる。 ということで、迷うことなくExpo Goを採用した。 開発サーバーの起動まではとてもシンプルで下記コマンドを実行する。 npx create-expo-app AwesomeProject cd AwesomeProject npx expo start 既存ディレクトリへの展開 ただ今回はリポジトリ作成済みでディレクトリが存在していたので、 npx create-expo-app $(pwd) 上記コマンドで現ディレクトリにAppを展開した。 そのうえで開発環境PCとエミュレータスマホを同一のWi-Fiに接続し、 npx expo start 上記コマンドで開発サーバーを立ち上げた。 エミュレータスマホでApp.jsに書かれた、Open up App.js to start working on your app!が表示されれば、立ち上げが成功している。 Hello World ! 次に、 <Text>Open up App.js to start working on your app!</Text> を <Text>Hello World!</Text> に変更すれば、当然、Hello World!が表示される。 これで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 今回は勉強なので、１番しっかりしてそうな「複数の画面遷移ができる状態に」を選択。...

まずは、Node.js LTSをインストールする必要がある。 私はnode管理ツールにvoltaを使用しているので、 $ volta install node success: installed and set node@16.16.0 (with npm@8.11.0) as default ↑を実行する。 Expo CLI のインストールする npm install --global expo-cli 正常にインストールできたかは、 expo whoami ↑を実行する。 結果、 bash: expo: command not found できていない…。 ログを辿る限り↓が怪しい。 Please ensure you have correct permissions to the Volta directory. 翻訳すると Volta ディレクトリに対する正しい権限があることを確認してください。 とのこと…、なるほど🤔? 調べてみるとそそもそもvoltaを使う際は開発者モードを有効にする必要があるとのこと。 会社のPCはvoltaを入れる前に有効にしていたので気が付かなかった。 ということで有効にしたうえで再挑戦。 npm install --global expo-cli やって、 expo whoami やると Not logged in, run expo login to authenticate 無事にインストールできた👍...