react-native-navigation

React Native 导航技能

学习使用 React Navigation v6+ 和 Expo Router 实现适用于生产环境的导航模式。

前置条件

• React Native 基础知识（组件、样式）
• TypeScript 基础知识
• 了解 React context

学习目标

完成此技能后，你将能够：

• 使用 TypeScript 设置 React Navigation
• 实现 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 中
Params undefined	类型不匹配	检查 ParamList 类型
Deep link not working	配置不匹配	验证 linking 路径

---

验证清单

• 导航在两个平台上均可正常使用
• 深度链接可打开正确的屏幕
• TypeScript 能检测参数错误
• 身份验证流程可保护路由

---

用法

Skill("react-native-navigation")

绑定的 Agent：02-react-native-navigation