expo-router

Expo Router のパターン

Stack ナビゲーターの設定

ルートレイアウトの設定

Stack コンポーネントで screenOptions を使うと、すべての画面にデフォルト設定を適用できます。各画面を明示的にすべて列挙しないでください。ルートはファイル構造から自動検出されます。

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }} />
  );
}

画面ごとの設定

各画面では、コンポーネントファイル内で <Stack.Screen> を使って個別のオプションを設定します。

// app/lesson/[id].tsx
import { Stack } from 'expo-router';

export default function LessonScreen() {
  return (
    <View>
      <Stack.Screen
        options={{
          title: 'Lesson',
          headerShown: true,
          headerBackTitle: 'Back',
        }}
      />
      {/* Screen content */}
    </View>
  );
}

ヘッダーの動的な設定

ボタンなど、ヘッダーのコンテンツを動的に変更するには、useNavigation と setOptions を使います。

import { useNavigation } from 'expo-router';
import { useLayoutEffect } from 'react';

export default function Screen() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Pressable onPress={handlePress}>
          <Ionicons name="add" size={28} />
        </Pressable>
      ),
    });
  }, [navigation]);

  return <View>{/* content */}</View>;
}

ネイティブタブ（expo-router/unstable-native-tabs）

ネイティブタブでは、iOS 上で SF Symbols を使ったプラットフォーム標準のタブバーを利用できます。

// app/(tabs)/_layout.tsx
import { Icon, Label, NativeTabs } from 'expo-router/unstable-native-tabs';

export default function TabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index" options={{ title: 'Home' }}>
        <Icon sf="house.fill" drawable="custom_android_drawable" />
        <Label>Home</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

主な原則

1. ファイルベースルーティング：ルートは app/ ディレクトリの構造から自動検出されます
2. 最小限の設定：上書きが必要な項目のみを設定します
3. 画面レベルのオプション：画面では、コンポーネント内の <Stack.Screen> を使ってヘッダーやオプションを設定します
4. レイアウトファイル：_layout.tsx ファイルで、そのディレクトリのナビゲーション構造を定義します
5. ルートグループ：(tabs) のように括弧で囲むと、URL パスに影響しないルートグループを作成できます

よくある避けるべきミス

• Stack にすべての画面を明示的に列挙しないでください。画面は自動検出されます
• ルート固有の設定に screenOptions を使わないでください。ルートファイル内で <Stack.Screen> を使います
• ナビゲーターを深くネストしないでください。よりすっきりとした構造にするには、ファイルベースルーティングを使います