mcpField
E
expo-router

expo-router

github.com/dralgorhythm開発12962 回インストール15 週間前に更新
リポジトリ

expo-router について

React Native 向けに Expo Router 6.x のファイルベースナビゲーションを構築するスキルです。`app/` 内のファイルを使ったレイアウト、ルートグループ、動的パラメーター、ナビゲーションの設計を案内します。

主な機能

  1. 01`app/` のファイルをナビゲーション画面に対応
  2. 02ネストしたレイアウトとルートグループの設定
  3. 03動的ルートとキャッチオールルートの作成
  4. 04ナビゲーションとルートパラメーターの取得
  5. 05未定義ページと画面オプションの処理

活用シーン

  1. 01ルートグループ別の画面構成
  2. 02パラメーター付き詳細画面の追加
  3. 03Stack または Tab ナビゲーションの設定
  4. 04共有 Provider と 404 画面の設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill expo-router

インストール後、Claude Code で/expo-routerを入力して読み込まれたか確認します。

詳細

Expo Router

概要

Expo Router 6.x を使用した React Native 向けのファイルベースのルーティングです。app/ ディレクトリのファイルシステム構造をナビゲーション画面に対応付けます。Stack と Tab ナビゲーター、ルートグループ、動的パラメーター、ネストされたレイアウトをサポートします。

インストール：Expo SDK 54 以降に含まれています。依存関係に expo-router が含まれていることを確認してください。

ワークフロー

ルーティングの設定：

  1. ルートレイアウト（プロバイダー、グローバルな外枠）として app/_layout.tsx を作成します
  2. ルートグループのディレクトリを作成します：app/(demo)/、app/(auth)/
  3. グループ固有のナビゲーションを設定するため、各グループに _layout.tsx を追加します
  4. デフォルト画面として index.tsx を追加します
  5. 動的ルートとして [param].tsx を追加します
  6. 404 の処理に +not-found.tsx を追加します

新しい画面の追加：

  1. 適切なルートグループにファイルを作成します
  2. React コンポーネントをデフォルトエクスポートします
  3. 親の _layout.tsx または <Stack.Screen options={...} /> で画面オプションを設定します
  4. useRouter() または <Link> を使って遷移します

ガイダンス

ファイルの規約
ファイル用途
_layout.tsxディレクトリのレイアウトラッパー（プロバイダー、ナビゲーター）
index.tsxディレクトリのデフォルト画面
[param].tsx動的ルートセグメント
[...catchAll].tsxキャッチオールルート
+not-found.tsx404 画面
(group)/ルートグループ（URL セグメントなし）
ルートレイアウトのパターン

ルートの _layout.tsx はエントリーポイントです。グローバルプロバイダーに使用します：

app/_layout.tsx → GestureHandlerRootView > SafeAreaProvider > Context > Stack

ルートレイアウトは薄く保ち、タブやヘッダーなどの外枠はグループレイアウトに配置します。

ルートグループ

ルートグループ (name)/ を使うと、URL パスに影響を与えずに画面を整理できます。一般的なパターン：

app/
├── _layout.tsx          # Root: providers + Stack
├── (demo)/
│   ├── _layout.tsx      # Tabs or Stack for demo scenes
│   ├── index.tsx        # Home screen
│   └── [id].tsx         # Detail screen
└── +not-found.tsx
ナビゲーション
  • プログラムによる遷移：const router = useRouter() → router.push('/detail/123')、router.back()
  • 宣言的な遷移：<Link href="/detail/123"> コンポーネント
  • パラメーター：const { id } = useLocalSearchParams<{ id: string }>()
  • リダイレクト：条件付きルーティングには <Redirect href="/login" />
画面オプション

レイアウトまたはインラインで画面の表示方法を設定します：

  • レイアウト内：<Stack.Screen name="detail" options={{ title: 'Detail', headerShown: false }} />
  • インライン：<Stack.Screen options={{ presentation: 'modal' }} />
  • 一般的なオプション：title、headerShown、presentation（'card' | 'modal'）、animation
レイアウトのネスト

プロバイダーはルートに、外枠はグループにネストします：

  • ルート _layout.tsx：GestureHandlerRootView、SafeAreaProvider、テーマコンテキスト、<Stack />
  • グループ _layout.tsx：画面オプションとヘッダー設定を指定した <Tabs /> または <Stack />

ベストプラクティス

  • ルートファイルは薄く保ち、/components/views/ のビューコンポーネントに処理を委譲します
  • ルートグループを使って、URL に影響を与えずに関心事を分離します
  • ジェネリクスを使ってルートパラメーターに型を指定します：useLocalSearchParams<{ id: string }>()
  • カスタムヘッダーを使用する場合は headerShown: false を設定します
  • 一貫した画面遷移には <Stack screenOptions={{ animation: 'slide_from_right' }} /> を使用します
  • 共有プロバイダー（テーマ、データコンテキスト）はルートの _layout.tsx に配置します
  • 404 を適切に処理するには +not-found.tsx を使用します

アンチパターン

  • ルートファイルにビジネスロジックを配置する（薄く保ち、コンポーネントに委譲します）
  • ルートグループを 2 階層より深くネストする
  • Expo Router の抽象化を使わず、React Navigation を直接使用する
  • 複雑なアプリで、定数ファイルを用意せずにナビゲーションパスを文字列としてハードコードする
  • ルートファイルでデフォルトエクスポートを忘れる（画面が空白になります）
  • ルートレイアウトに配置すべきプロバイダーをグループレイアウトに配置する

コメント

Markdown 対応