React Nativeを学び始めたので、ログを残します。
React Nativeについては何も知らない状態ですが、ReactとNext.jsは少々知っている程度からのスタートです。

Step1

最初に、↓のチュートリアルをやりました。YouTubeにこういうコンテンツが上がっているのは本当にありがたいですね。

https://www.youtube.com/watch?v=ZBCUegTZF7M

• 認証 (サインアップ / サインイン / ログアウト / 認証状態チェック)
• コンテンツアップロード
• プロフィール

などの機能を実装しながらRN + Expo開発を学べます。

このチュートリアルでは、以下のBaaS, ライブラリを使いました。

• BaaS : appwrite (https://appwrite.io/)
• ルーティング : expo-router (https://docs.expo.dev/router/create-pages/#dynamic-routes)
• ドキュメントアクセス
  • DocumentPicker (https://docs.expo.dev/versions/latest/sdk/document-picker/)
  • ImagePicker (https://docs.expo.dev/versions/latest/sdk/imagepicker/)
• 動画再生 : expo-av (https://docs.expo.dev/versions/latest/sdk/av/)
  • ＊ チュートリアルで使っているexpo-avのVideoコンポーネントは廃止されるとのこと
    • https://github.com/expo/expo/pull/32267
• スタイリング : NativeWind (https://www.nativewind.dev/)

学んだこと

• RN +Expoでプロジェクトの作成から動くアプリを作るまでの流れ
• ルーティングの方法
• NativeWindによるスタイリング (TailWindとほぼ同じ)

Expoの仕組みやビルド方法が気になったので調べてみます。

STEP2

↓をやっていきます。

• STEP1で作ったアプリのビルド方法を学ぶ(Android)
• Expoについてざっと知る

アプリのビルド、実機インストール

https://docs.expo.dev/build/setup/
公式に沿って進める。

> npm install -g eas-cli
> eas login # Expoアカウントを事前に作成しておく
> eas build:configure
> eas build --platform android # Expoサーバに成果物がアップロードされダッシュボードで確認できる

これによりAABファイルがビルドされExpoにアップロードできました。
ただAABファイルだとそのまま実機インストールできないので、APKファイルをビルドしたい。

デフォルトだとAABが生成されるので、eas.jsonを編集しAPKを生成するよう編集する。

{
  "cli": {
    "version": ">= 14.2.0",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
// 以下を追加
+     "android": {
+      "buildType": "apk",
+      "gradleCommand": ":app:assembleDebug"
+    }
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
      "autoIncrement": true
    }
  },
  "submit": {
    "production": {}
  }
}

その後、再ビルド

> eas build -p android --profile development

--profileには、追記した記述の親プロパティ名のdevelopmentを指定。
こうすると、APKファイルが生成されExpoにアップロードされました！実機AndroidにExpo Goを入れておくと、そこからAPKをダウンロードでき、インストールできました。

メモ
Android Keystoreとは...

• 説明 : デバイス内で安全に暗号鍵を生成・管理するためにAndroidシステムが提供している機能
• 目的 : アプリ専用ストレージ等に保存されている重要なデータを暗号化する際に使用
• 用途 : セッションID, アクセストークン、ユーザ情報等の暗号化

Expoについてざっと知る

Expoとは、React Nativeアプリ開発を簡単にするためのツール、サービスのセット。Expoを使うことで、React Nativeアプリの開発・デバッグ・テスト・ビルドが効率的になる。

主な機能

• Expo Goアプリを使用することで、実機やエミュレータでアプリをプレビューできる
• EAS (Expo Application Services)を使って、ネイティブの知識がなくてもネイティブコードへのビルドを行える