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 商业项目中最常见、最稳定的导航架构。