react-native-navigation

React Native Navigation スキル

React Navigation v6+ と Expo Router を使用した、本番環境向けのナビゲーションパターンを学びます。

前提条件

• React Native の基礎知識（コンポーネント、スタイリング）
• TypeScript の基礎知識
• React context の理解

学習目標

このスキルを完了すると、次のことができるようになります。

• React Navigation を TypeScript でセットアップする
• Stack、Tab、Drawer ナビゲーターを実装する
• ディープリンクとユニバーサルリンクを設定する
• 認証フローを処理する
• 型安全な方法で画面間にパラメーターを渡す

---

対象トピック

1. インストール

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# For tabs
npm install @react-navigation/bottom-tabs

# For drawers
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

2. Stack ナビゲーター

import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

3. Tab ナビゲーター

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

4. ディープリンク

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Details: 'details/:id',
    },
  },
};

<NavigationContainer linking={linking}>
  {/* navigators */}
</NavigationContainer>

5. 型安全なナビゲーション

import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type NavigationProp = NativeStackNavigationProp<RootStackParamList>;

function HomeScreen() {
  const navigation = useNavigation<NavigationProp>();

  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details', { id: '123' })}
    />
  );
}

---

クイックスタートの例

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { id: string; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

よくあるエラーと解決策

エラー	原因	解決策
"Navigator not found"	NavigationContainer がない	アプリを NavigationContainer でラップする
パラメーターが undefined	型の不一致	ParamList の型を確認する
ディープリンクが動作しない	設定の不一致	linking のパスを確認する

---

検証チェックリスト

• 両方のプラットフォームでナビゲーションが動作する
• ディープリンクで正しい画面が開く
• TypeScript がパラメーターのエラーを検出する
• 認証フローでルートが保護される

---

使用方法

Skill("react-native-navigation")

紐付けられたエージェント: 02-react-native-navigation