react-native-navigation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Native Navigation Skill

React Native 导航技能

Learn production-ready navigation patterns using React Navigation v6+ and Expo Router.

学习使用React Navigation v6+和Expo Router的生产级导航模式。

Prerequisites

前置条件

React Native basics (components, styling)
TypeScript fundamentals
Understanding of React context

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

Learning Objectives

学习目标

Topics Covered

涵盖主题

1. Installation

1. 安装

bash

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

bash

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

undefined

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

undefined

2. Stack Navigator

2. 栈导航器

tsx

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>
  );
}

tsx

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 Navigator

3. 标签导航器

tsx

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>
  );
}

tsx

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. Deep Linking

4. 深度链接

tsx

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

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

tsx

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

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

5. Type-Safe Navigation

5. 类型安全导航

tsx

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' })}
    />
  );
}

tsx

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' })}
    />
  );
}

Quick Start Example

快速开始示例

tsx

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>
  );
}

tsx

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>
  );
}

Common Errors & Solutions

常见错误与解决方案

Error	Cause	Solution
"Navigator not found"	Missing NavigationContainer	Wrap app in NavigationContainer
Params undefined	Type mismatch	Check ParamList types
Deep link not working	Config mismatch	Verify linking paths

错误	原因	解决方案
"Navigator not found"	缺少NavigationContainer	用NavigationContainer包裹应用
参数未定义	类型不匹配	检查ParamList类型
深度链接无法工作	配置不匹配	验证链接路径

Validation Checklist

验证清单

Navigation works on both platforms
Deep links open correct screens
TypeScript catches param errors
Auth flow protects routes

导航在双平台均可正常工作
深度链接可打开对应屏幕
TypeScript可捕获参数错误
认证流程可保护路由

Usage

使用方法

Skill("react-native-navigation")

Bonded Agent:

02-react-native-navigation

Skill("react-native-navigation")

绑定Agent：

02-react-native-navigation