今日から毎日ReactNativeを学ぶことにした（19日目）

アウェージェノアは鬼門だった。悪くはなかったが昨季の完成度に比べると全体的に仕上がってない印象。PSM追い込んだっぽいのでそこまで心配はしてない。

前回

本日

Authentication in Expo Router

Authentication in Expo Router

商用アプリでガッツリ使いそうなので、まとまった時間をとって対応しようと思う。Expo routerをまずは一通り終わらせることに注力したい。

Not found routes

Not found routes

どこかで既に対応したが、こちらのページに詳しく記載があるので困ったら戻ってくる。+not-found.tsxという特別なファイルがルートのないファイル参照の時に来るので404用の表示やその際の処理を記載しよう。

Screen tracking for analytics

Screen tracking for analytics

Expo routerは画面の追跡が簡単らしい。比較対象のReact Navigationを使ったことがないので差分は正直わからない…

// app/_layout.tsx
import { useEffect } from 'react';
import { usePathname, useGlobalSearchParams, Slot } from 'expo-router';

export default function Layout() {
  const pathname = usePathname();
  const params = useGlobalSearchParams();

  useEffect(() => {
  　　// GA4などに送る処理をここに記載
  });

  // Export all the children routes in the most basic way.
  return <Slot />;
}

↑こんな感じでレイアウトファイルにURL追跡する処理を書けば良さそう

Top-level src directory

Top-level src directory

デフォルトで始めると指定したディレクトリ名以下にExpoフレームワークのディレクトリが展開されるが、これをsrc以下にすることができる。また、デフォルトでsrcディレクトリがあればそちらを先に参照する仕様のようなので、特に何か追加コードを書く必要もないのでありがたい。

// app.json
{
  "plugins": [
    [
      "expo-router",
      {
        "root": "./src/routes"
      }
    ]
  ]
}

↑ディレクトリをカスタマイズすることも可能。ただ、あまり推奨していないようなので特段理由がなければやめた方が良さそう。

本日のまとめ

ザクっと内容だけ把握しておけば良さそうな内容。実際の現場で必要になったら戻ってこれれば良い。