React Navigation 核心使用（Stack/Tab/Drawer）

React Navigation 是 React Native 中最主流的导航库。实际开发中，80% 以上的场景主要围绕三种导航器：

Stack Navigator（页面栈）
Bottom Tab Navigator（底部标签栏）
Drawer Navigator（侧边抽屉菜单）

1. 安装

React Navigation 7.x：

复制代码

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

Stack：

复制代码

npm install @react-navigation/native-stack

Bottom Tabs：

复制代码

npm install @react-navigation/bottom-tabs

Drawer：

复制代码

npm install @react-navigation/drawer

2. NavigationContainer

所有导航都必须放在 NavigationContainer 中：

复制代码

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

export default function App() {
  return (
    <NavigationContainer>
      {/* Navigator */}
    </NavigationContainer>
  );
}

3. Stack Navigator

最常用。

适用于：

复制代码

首页
↓
详情页
↓
详情页
↓
详情页

像浏览器历史记录一样压栈。

创建

复制代码

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

const Stack = createNativeStackNavigator();

页面

复制代码

function HomeScreen() {
  return null;
}

function DetailScreen() {
  return null;
}

注册路由

复制代码

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
  />

  <Stack.Screen
    name="Detail"
    component={DetailScreen}
  />
</Stack.Navigator>

页面跳转

复制代码

navigation.navigate('Detail');

复制代码

navigation.goBack();

传递参数

发送：

复制代码

navigation.navigate('Detail', {
  id: 1001,
});

接收：

复制代码

function DetailScreen({ route }) {
  const { id } = route.params;

  return null;
}

替换页面

登录场景常见：

复制代码

navigation.replace('Home');

效果：

复制代码

Login
 ↓ replace
Home

返回键不会回到 Login。

重置导航栈

退出登录：

复制代码

navigation.reset({
  index: 0,
  routes: [{ name: 'Login' }],
});

4. Bottom Tab Navigator

适用于：

复制代码

首页
消息
发现
我的

创建：

复制代码

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

const Tab = createBottomTabNavigator();

复制代码

<Tab.Navigator>
  <Tab.Screen
    name="Home"
    component={HomeScreen}
  />

  <Tab.Screen
    name="Profile"
    component={ProfileScreen}
  />
</Tab.Navigator>

效果：

复制代码

------------------
 首页   我的
------------------

设置图标

通常搭配：

复制代码

npm install react-native-vector-icons

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabBarIcon: ({ color, size }) => (
      <Icon
        name="home"
        color={color}
        size={size}
      />
    ),
  }}
/>

Tab 配置

隐藏标题：

复制代码

screenOptions={{
  headerShown: false
}}

设置激活颜色：

复制代码

screenOptions={{
  tabBarActiveTintColor: '#007AFF',
}}

5. Drawer Navigator

适用于：

复制代码

☰ 菜单
 ├ 首页
 ├ 用户中心
 ├ 设置
 └ 关于

创建：

复制代码

import { createDrawerNavigator }
from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

复制代码

<Drawer.Navigator>
  <Drawer.Screen
    name="Home"
    component={HomeScreen}
  />

  <Drawer.Screen
    name="Settings"
    component={SettingsScreen}
  />
</Drawer.Navigator>

打开 Drawer

复制代码

navigation.openDrawer();

关闭：

复制代码

navigation.closeDrawer();

切换：

复制代码

navigation.toggleDrawer();

6. 组合导航（最重要）

实际项目不会单独使用。

典型结构：

复制代码

App
 │
 └─ Stack
      │
      ├─ Login
      │
      └─ MainTabs
             │
             ├─ Home
             ├─ Message
             └─ Mine

Tab 放 Stack 中

复制代码

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

<Stack.Navigator>
  <Stack.Screen
    name="Login"
    component={LoginScreen}
  />

  <Stack.Screen
    name="Main"
    component={MainTabs}
  />
</Stack.Navigator>

7. TypeScript 类型定义

推荐项目一开始就配置。

复制代码

export type RootStackParamList = {
  Home: undefined;
  Detail: {
    id: number;
  };
};

创建：

复制代码

const Stack =
  createNativeStackNavigator<RootStackParamList>();

跳转获得类型提示：

复制代码

navigation.navigate('Detail', {
  id: 100,
});

错误参数会直接报错。

8. 实际项目推荐结构

复制代码

src
├── navigation
│   ├── RootNavigator.tsx
│   ├── StackNavigator.tsx
│   ├── TabNavigator.tsx
│   └── DrawerNavigator.tsx
│
├── screens
│   ├── Home
│   ├── Login
│   ├── Detail
│   └── Profile
│
└── App.tsx

常见组合模式：

复制代码

NavigationContainer
        │
        ▼
Stack
 ├── Login
 ├── Register
 └── Tabs
      ├── Home
      ├── Message
      └── Mine

这是目前 React Native 商业项目中最常见、最稳定的导航架构。