---

React Navigation 零基础入门：打造流畅的 React Native 应用导航体验

欢迎来到 React Native 的世界！构建一个功能丰富的移动应用不仅仅是将 UI 组件呈现在屏幕上，更重要的是如何让用户在不同的屏幕（页面）之间自由切换、传递信息，并保持应用的逻辑流程。这就是“导航”（Navigation）的核心作用。

在 React Native 开发中，有多种导航解决方案，但 React Navigation 无疑是目前最流行、功能最全面、社区支持最好的选择。它提供了一套灵活且可高度定制的导航组件，让你能够轻松地为你的应用构建出各种复杂的导航结构，如页面堆栈、底部标签栏、侧拉抽屉等。

本篇文章将带领你从零开始，一步步学习 React Navigation 的基础知识和核心用法。即使你之前从未接触过 React Native 导航，或者对 React Navigation 感到陌生，本教程也将尽力为你扫清障碍，助你快速掌握其精髓。

准备好了吗？让我们开始这段 React Navigation 的探索之旅吧！

第一部分：理解导航与 React Navigation

1. 为什么我们需要导航？

想象一下你正在开发一个简单的电子商务应用。它至少需要：
* 一个首页展示商品列表。
* 一个商品详情页展示某个商品的详细信息。
* 一个购物车页面。
* 一个用户个人中心页面。

用户从首页点击一个商品，需要跳转到该商品的详情页；从详情页可能需要返回首页或添加到购物车；从任何地方都可能需要进入个人中心。这些页面之间的切换和关联，就是导航系统需要解决的问题。

一个好的导航系统应该具备以下特点：
* 直观易用： 用户能够清晰地知道自己在应用的哪个位置，以及如何前往其他页面。
* 流畅高效： 页面切换应该平滑快速，避免卡顿。
* 状态管理： 在页面之间切换时，需要能够方便地传递数据和维护页面状态。
* 可定制性： 能够灵活地改变导航的外观和行为，以适应应用的设计风格。

2. 为什么选择 React Navigation？

React Navigation 是一个完全基于 JavaScript 的解决方案，它与 React 和 React Native 的组件化思想高度契合。它的主要优势包括：

• 完全跨平台： 提供了统一的 API，一套代码可以同时用于 iOS 和 Android。
• 基于组件： 导航结构完全通过 React 组件来定义，易于理解和组合。
• 可定制性强： 几乎所有方面都可以定制，从导航栏样式到页面切换动画。
• 性能良好： 利用原生组件（如 react-native-screens）优化性能，确保流畅的过渡效果。
• 社区活跃： 拥有庞大的用户基础和活跃的社区，遇到问题容易找到帮助，文档详尽。
• 支持多种导航模式： 开箱即用支持堆栈导航、标签导航、抽屉导航等多种常见模式，并支持嵌套组合。

React Navigation 的核心思想是将屏幕（Screen）视为独立的组件，并通过不同的“导航器”（Navigator）来管理这些屏幕之间的切换和组织关系。

第二部分：准备工作与安装

在开始使用 React Navigation 之前，请确保你的 React Native 开发环境已经搭建好。这通常包括 Node.js, npm/yarn, Watchman, 以及对应的 iOS/Android 开发工具链。

如果你是使用 Expo CLI 创建的项目，安装会更简单；如果是使用 React Native CLI 创建的项目（bare workflow），则可能需要额外安装一些原生依赖。本教程主要基于 Expo 环境进行讲解，但核心概念对于 bare workflow 同样适用。

1. 创建一个新的 React Native 项目（如果还没有）

使用 Expo CLI:

“`bash
expo init MyNavigationApp

选择一个模板，例如 blank 或 tabs

cd MyNavigationApp
“`

使用 React Native CLI:

bash
npx react-native init MyNavigationApp
cd MyNavigationApp

2. 安装 React Navigation 核心库

这是 React Navigation 的基础。

“`bash

使用 yarn

yarn add @react-navigation/native

使用 npm

npm install @react-navigation/native
“`

3. 安装所需的依赖

React Navigation 依赖于一些其他库来实现平滑的过渡和更好的性能。

Expo 项目:

Expo 管理了大多数原生模块，所以通常只需要安装少数几个。

“`bash

使用 yarn

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

使用 npm

npx expo install react-native-screens react-native-safe-area-context
“`

Bare React Native 项目:

你需要手动安装并链接这些库。

“`bash

使用 yarn

yarn add react-native-screens react-native-safe-area-context

使用 npm

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

安装完成后，对于 bare React Native 项目，你可能需要运行以下命令来确保原生模块被正确链接（新版本 React Native 通常会自动链接，但手动运行一下不会有坏处）：

“`bash
npx react-native run-ios

或

npx react-native run-android
“`

4. 安装特定类型的导航器

React Navigation 本身只提供了导航的基础结构，你需要安装特定的导航器库来使用堆栈、标签、抽屉等功能。我们将从最常用的 堆栈导航器 (Stack Navigator) 开始。

“`bash

使用 yarn

yarn add @react-navigation/stack

使用 npm

npm install @react-navigation/stack
“`

安装完成后，你的项目就可以开始使用 React Navigation 了！

第三部分：核心概念与第一个导航器：堆栈导航 (Stack Navigator)

React Navigation 的核心是 导航容器 (Navigation Container) 和 导航器 (Navigator)。

• NavigationContainer: 这是整个应用导航树的根。它负责管理应用的导航状态，并且必须包裹所有的导航器结构。你的应用中通常只需要一个 NavigationContainer。
• Navigator: 导航器负责渲染其内部定义的屏幕，并管理屏幕之间的切换逻辑。React Navigation 提供了多种类型的导航器，每种都有其特定的 UI 和行为。
• Screen: 每个 <Navigator> 组件内部都包含一个或多个 <Screen> 组件。每个 <Screen> 组件代表应用中的一个独立的页面，并关联一个 React 组件来渲染该页面的内容。

1. 创建一个简单的堆栈导航

堆栈导航是应用中最常见的导航模式。它类似于浏览器的历史记录，新页面会叠加在当前页面之上，返回操作会移除当前页面回到上一个页面。

首先，我们在项目根目录（例如 App.js 或 App.tsx）中设置导航容器和堆栈导航器。

“`javascript
// App.js
import * as React from ‘react’;
import { View, Text, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;

// 定义你的屏幕组件
function HomeScreen({ navigation }) {
return (

Home Screen
navigation.navigate(‘Details’)} // navigate 函数用于跳转
/>

);
}

function DetailsScreen() {
return (

Details Screen

);
}

// 创建一个 Stack Navigator
const Stack = createStackNavigator();

function App() {
return (
// NavigationContainer 包裹整个导航结构

{/ Stack.Navigator 是堆栈导航器 /}
{/ initialRouteName 设置默认显示的屏幕 /}
{/ Stack.Screen 定义每个屏幕 /}




);
}

export default App;
“`

代码解释：

• import { NavigationContainer } from '@react-navigation/native';：导入导航容器。
• import { createStackNavigator } from '@react-navigation/stack';：导入创建堆栈导航器的函数。
• function HomeScreen({ navigation }) { ... } 和 function DetailsScreen() { ... }：这是我们的两个屏幕组件。注意： 通过导航器渲染的组件会自动接收到一个 navigation prop，其中包含了用于导航的方法（如 navigate）。
• const Stack = createStackNavigator();：调用 createStackNavigator 创建一个堆栈导航器的对象，这个对象包含了 Navigator 和 Screen 组件。
• <NavigationContainer> ... </NavigationContainer>：应用导航的根容器。
• <Stack.Navigator>：堆栈导航器组件。
  • initialRouteName="Home"：指定应用启动时最先显示的屏幕是名为 “Home” 的屏幕。
• <Stack.Screen name="Home" component={HomeScreen} />：定义一个屏幕。
  • name="Home"：这个屏幕的名称，用于在导航时引用它（例如 navigation.navigate('Home')）。
  • component={HomeScreen}：用于渲染这个屏幕的 React 组件。
• onPress={() => navigation.navigate('Details')}：在 HomeScreen 中，我们使用 navigation.navigate('Details') 方法来跳转到名为 “Details” 的屏幕。

运行你的应用 (expo start 或 npx react-native run-ios/android)，你将看到 “Home Screen” 页面，点击按钮会平滑地过渡到 “Details Screen” 页面。iOS 上会显示一个标题栏和返回按钮，Android 上也会有标题栏，但返回按钮在物理或系统导航中。

2. 在屏幕之间传递参数

很多时候，从一个屏幕跳转到另一个屏幕时，需要传递一些数据。例如，从商品列表页跳转到商品详情页时，你需要告诉详情页显示哪个商品的详细信息（例如商品的 ID）。

React Navigation 允许你在 navigate 方法中传递一个对象作为第二个参数，这个对象就是你要传递的参数。在目标屏幕中，可以通过 route.params 来访问这些参数。

修改 HomeScreen 和 DetailsScreen：

“`javascript
// App.js (接上面的代码)

function HomeScreen({ navigation }) {
return (

Home Screen

navigation.navigate(‘Details’, { // 在 navigate 时传递参数对象
itemId: 86,
otherParam: ‘anything you want’,
})
}
/>

);
}

// 注意这里，DetailsScreen 现在接收 route prop
function DetailsScreen({ route, navigation }) {
// 从 route.params 中解构出传递的参数
const { itemId, otherParam } = route.params;

return (

Details Screen
itemId: {JSON.stringify(itemId)}
otherParam: {JSON.stringify(otherParam)}

navigation.navigate(‘Home’)} // 回到 Home
/>
navigation.goBack()} // 返回上一个屏幕
/>
navigation.popToTop()} // 返回堆栈顶部的第一个屏幕
/>

);
}

// … Stack and App definition remain the same
// const Stack = createStackNavigator();
// function App() { … }
// export default App;
“`

代码解释：

• 在 HomeScreen 中，navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want' }) 将一个包含 itemId 和 otherParam 的对象作为第二个参数传递。
• 在 DetailsScreen 中，函数组件接收 route prop。route.params 是一个对象，包含了从上一个屏幕传递来的参数。我们通过解构获取 itemId 和 otherParam 并显示出来。
• navigation.goBack()：返回到堆栈中的上一个屏幕。
• navigation.popToTop()：返回到堆栈中的第一个屏幕（即 initialRouteName 指定的屏幕）。

运行应用，点击按钮跳转到 Details 页面，你会看到传递的参数被正确显示。点击“Go back”按钮会回到 Home 页面。

3. 配置屏幕选项 (Header)

每个屏幕都可以单独配置其在导航器中显示时的外观和行为，最常见的就是配置导航栏（Header）。这通过 <Stack.Screen> 的 options prop 来完成。

“`javascript
// App.js (接上面的代码)

// … HomeScreen and DetailsScreen definitions

const Stack = createStackNavigator();

function App() {
return (






);
}

// export default App;
“`

代码解释：

• 在 <Stack.Screen> 组件上添加 options prop，它的值是一个对象。
• title: 设置导航栏中间显示的标题文本。
• headerStyle: 设置导航栏容器的样式，例如背景颜色。
• headerTintColor: 设置导航栏上标题文本和返回按钮箭头的颜色。
• headerTitleStyle: 设置导航栏标题文本的样式，例如字体粗细。

你也可以在 Stack.Navigator 上设置 screenOptions prop，这样可以为所有子屏幕设置默认的选项，然后在单个屏幕的 options 中覆盖这些默认值。

“`javascript
// App.js (接上面的代码)

const Stack = createStackNavigator();

function App() {
return (



({ // options 也可以是一个函数，接收 route 参数
title: route.params?.otherParam ?? ‘Details’, // 使用传递的参数作为标题，如果没有则显示 ‘Details’
headerStyle: { // 覆盖默认的 headerStyle
backgroundColor: ‘#f4511e’,
},
})}
/>


);
}
// export default App;
“`

在这个例子中，我们展示了如何在 screenOptions 中设置默认样式，并在 DetailsScreen 的 options 中覆盖了背景颜色，并演示了 options 如何接收 route 参数来动态设置标题。

4. 获取 navigation 和 route 钩子

在函数组件中，除了通过 props 获取 navigation 和 route 外，你还可以使用 useNavigation 和 useRoute 钩子。这在你不想将 navigation 和 route 层层传递给子组件时特别有用。

“`javascript
// SomeComponent.js
import { useNavigation, useRoute } from ‘@react-navigation/native’;
import { View, Text, Button } from ‘react-native’;
import * as React from ‘react’;

function SomeComponent() {
const navigation = useNavigation(); // 获取 navigation 对象
const route = useRoute(); // 获取 route 对象

const { someData } = route.params || {}; // 安全地访问参数

return (

Received Data: {someData}

navigation.goBack()}
/>

);
}

// 你可以在一个 Screen 组件中使用这个 SomeComponent，
// SomeComponent 就不需要通过 prop 接收 navigation 和 route 了
// 例如:
“`

使用钩子可以使组件更加独立和可复用，因为它不再强依赖于父组件传递 navigation 和 route props。

第四部分：其他常用导航器

除了 Stack Navigator，React Navigation 还提供了其他几种常用的导航模式。

1. 底部标签导航 (Bottom Tab Navigator)

底部标签导航通常用于应用的主导航，允许用户在几个主要功能模块之间快速切换，每个模块可能有自己的堆栈。

安装 Bottom Tab Navigator:

“`bash

使用 yarn

yarn add @react-navigation/bottom-tabs

使用 npm

npm install @react-navigation/bottom-tabs
“`

使用 Bottom Tab Navigator:

我们将创建一个包含 Home 和 Settings 两个标签的底部导航。

“`javascript
// App.js (接上面的代码，但我们将重构 App 函数)

import * as React from ‘react’;
import { View, Text, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;

// 引入 Stack Navigator 和 Bottom Tab Navigator
import { createStackNavigator } from ‘@react-navigation/stack’;
import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;

// 为了演示，我们创建 SettingsScreen
function SettingsScreen({ navigation }) {
return (

Settings Screen

navigation.navigate(‘Home’)} />
{/ 注意: navigate(‘Home’) 在这里会导航到 Tab Navigator 中的 ‘Home’ 标签 /}

);
}

// 上面定义的 HomeScreen 和 DetailsScreen 也可以继续使用

const Stack = createStackNavigator(); // 用于 Home 标签内部的堆栈
const Tab = createBottomTabNavigator(); // 底部标签导航器

// 定义 Home 标签内部的堆栈结构
function HomeStack() {
return (




);
}

// 定义 Settings 标签内部的堆栈结构 (这里只有一个屏幕，但也可以是堆栈)
function SettingsStack() {
return (



);
}

function App() {
return (

{/ Tab.Navigator 是底部标签导航器 /}
({
// 这里可以根据 route 配置 tabBarIcon, tabBarLabel 等
// 例如设置图标 (需要安装 react-native-vector-icons 或使用 Expo 的 @expo/vector-icons)
// tabBarIcon: ({ focused, color, size }) => {
// let iconName;
// if (route.name === ‘HomeStack’) {
// iconName = focused ? ‘home’ : ‘home-outline’;
// } else if (route.name === ‘SettingsStack’) {
// iconName = focused ? ‘settings’ : ‘settings-outline’;
// }
// // 你需要返回一个 Icon 组件
// // return ;
// },
tabBarActiveTintColor: ‘tomato’, // 选中标签的颜色
tabBarInactiveTintColor: ‘gray’, // 未选中标签的颜色
})}
>
{/ Tab.Screen 定义每个标签页 /}
{/ 注意这里 component 指向的是上面定义的堆栈导航器组件 /}




);
}

export default App;
“`

代码解释：

• createBottomTabNavigator() 创建一个底部标签导航器。
• <Tab.Navigator> 包裹 <Tab.Screen>。
• <Tab.Screen> 定义每个标签页。name 是这个标签的内部名称，component 是这个标签页加载的组件。这里我们将 component 设置为我们定义的堆栈导航器 (HomeStack 和 SettingsStack)，这样每个标签页内部都可以有自己的导航历史。
• screenOptions 可以用来配置底部标签栏的样式，例如图标、文本颜色等。options 用于配置单个标签页的选项，例如显示的标题。
• options={{ headerShown: false }} 是常用的设置，因为它隐藏了 Tab Navigator 默认的顶部导航栏，而我们通常希望看到的是内部 Stack Navigator 的导航栏。

运行应用，你会在底部看到 “Home” 和 “Settings” 两个标签。点击 Home 标签内的按钮会跳转到 Details 页面，此时底部标签栏仍然可见，并且顶部导航栏显示的是 Stack Navigator 的头部。

2. 侧拉抽屉导航 (Drawer Navigator)

侧拉抽屉导航常用于提供应用的全局导航菜单，通过从屏幕边缘滑动或点击图标来展开。

安装 Drawer Navigator:

“`bash

使用 yarn

yarn add @react-navigation/drawer

使用 npm

npm install @react-navigation/drawer

Drawer Navigator 依赖于 react-native-gesture-handler 和 react-native-reanimated

Expo 项目:

expo install react-native-gesture-handler react-native-reanimated

Bare React Native 项目:

yarn add react-native-gesture-handler react-native-reanimated

或者 npm install …

“`

对于 bare React Native 项目，安装 react-native-reanimated 后，你需要在项目的入口文件（通常是 index.js 或 App.js 的顶部）添加以下代码：

javascript
// import 'react-native-gesture-handler'; // Ensure this is at the very top
// ... other imports

并根据 Reanimated 的文档进行进一步配置（通常需要修改 babel.config.js）。Expo 项目通常会自动处理这部分。

使用 Drawer Navigator:

我们将创建一个包含 Home 和 Notifications 两个抽屉项的导航。

“`javascript
// App.js (接上面的代码，重构 App 函数)

import * as React from ‘react’;
import { View, Text, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;

// 引入 Drawer Navigator
import { createDrawerNavigator } from ‘@react-navigation/drawer’;

// 创建 NotificationsScreen
function NotificationsScreen({ navigation }) {
return (

Notifications Screen

navigation.goBack()} title=”Go back” />

);
}

// HomeScreen (我们上面已经定义过)
// function HomeScreen({ navigation }) { … }

const Drawer = createDrawerNavigator(); // 侧拉抽屉导航器

function App() {
return (

{/ Drawer.Navigator 是侧拉抽屉导航器 /}

{/ Drawer.Screen 定义每个抽屉项 /}




);
}

export default App;
“`

代码解释：

• createDrawerNavigator() 创建一个侧拉抽屉导航器。
• <Drawer.Navigator> 包裹 <Drawer.Screen>。
• <Drawer.Screen> 定义每个抽屉菜单项。name 是内部名称，component 是点击该菜单项后显示的屏幕组件。
• 默认情况下，Drawer Navigator 会在顶部导航栏左侧显示一个抽屉图标，点击它可以打开抽屉，或者从屏幕左边缘向右滑动也可以打开抽屉。

运行应用，你会看到一个带有 Home 标题的页面。尝试从左边缘向右滑动，或者如果显示了抽屉图标（取决于平台和配置），点击它，你会看到包含 Home 和 Notifications 的抽屉菜单。点击 Notifications 会切换到 Notifications 页面。

3. 嵌套导航器 (Nesting Navigators)

在实际应用中，你经常需要将不同的导航器组合起来。最常见的模式是将 Stack Navigator 嵌套在 Tab Navigator 或 Drawer Navigator 内部。例如，每个底部标签页都有自己的堆栈历史。我们已经在底部标签导航的例子中演示了这一点，将 HomeStack 和 SettingsStack（它们本身是 Stack Navigators）作为 <Tab.Screen> 的 component。

理解嵌套导航器的关键在于：

• 外部导航器（例如 Tab 或 Drawer）管理顶层屏幕（即其直接的 <Screen> 子元素）。
• 内部导航器（例如 Stack）管理其内部屏幕的导航。
• 导航操作 (navigate, goBack 等) 默认在当前屏幕所属的导航器中执行。
• 要导航到 不同 导航器中的屏幕，你需要指定路径。例如，从 HomeStack 内部的一个屏幕导航到 SettingsStack 内部的屏幕，你需要像这样导航：navigation.navigate('SettingsTab', { screen: 'Settings' })。这里，'SettingsTab' 是外部 Tab Navigator 中的屏幕名称，{ screen: 'Settings' } 告诉 Tab Navigator 进入名为 ‘SettingsTab’ 的屏幕，并且在该屏幕的内部导航器中导航到名为 ‘Settings’ 的子屏幕。

嵌套使得构建复杂但有组织的导航结构成为可能。

第五部分：更多导航操作与高级话题

除了 navigate 和 goBack，还有其他一些有用的导航操作：

• navigation.push('ScreenName', params): 仅适用于 Stack Navigator。与 navigate 类似，但它总是将新屏幕推入堆栈，即使该屏幕已经在堆栈顶部。这在你需要多次进入同一个屏幕（例如连续查看不同商品的详情）时很有用。
• navigation.pop(count): 仅适用于 Stack Navigator。从堆栈中弹出当前屏幕或指定数量的屏幕。navigation.goBack() 相当于 navigation.pop(1)。
• navigation.replace('ScreenName', params): 仅适用于 Stack Navigator。替换当前屏幕，而不是将新屏幕推到顶部。当你不想让用户返回到上一个屏幕时使用（例如登录成功后跳转到主页）。
• navigation.setOptions({...}): 在屏幕组件内部动态修改当前屏幕的导航选项（例如动态改变标题）。

“`javascript
// Example of setOptions in HomeScreen
import { useLayoutEffect } from ‘react’; // 通常在 useLayoutEffect 中调用

function HomeScreen({ navigation }) {
useLayoutEffect(() => {
navigation.setOptions({
title: ‘My Home Page’, // Dynamically change title
// headerRight: () => ( // Add a button to the header
//

alert(‘Right button clicked’)} title=”Info” />
// ),
});
}, [navigation]); // Add navigation to dependency array

// ... rest of HomeScreen component

}
“`

高级话题 (简要提及):

• 自定义头部/标签栏/抽屉内容： 可以通过 options 中的 header, tabBar, drawerContent 等属性传入自定义组件来完全替换默认的 UI。
• 认证流程： React Navigation 提供指南来处理用户登录/登出后的导航状态切换。
• 与 Redux/Context API 集成： 你可以将导航状态存储在全局状态管理库中，或者在导航中使用 Context API 传递数据。
• 深度链接 (Deep Linking): 允许用户通过外部链接（如网站链接或推送通知）直接打开应用内的特定屏幕。

第六部分：总结与下一步

恭喜你！你已经学习了 React Navigation 的基础知识，包括：

• 导航的概念和 React Navigation 的优势。
• 如何安装和设置 React Navigation。
• NavigationContainer 的作用。
• 使用 Stack Navigator 进行页面堆栈导航。
• 在屏幕之间传递参数。
• 配置屏幕的导航栏选项。
• 使用 useNavigation 和 useRoute 钩子。
• 使用 Bottom Tab Navigator 创建底部标签导航。
• 使用 Drawer Navigator 创建侧拉抽屉导航。
• 理解和初步应用导航器的嵌套。
• 了解其他导航操作和高级概念的方向。

这只是 React Navigation 功能的冰山一角。要更深入地掌握它，建议你：

1. 动手实践： 尝试在你自己的项目中构建一个包含不同导航器的复杂结构。
2. 查阅官方文档： React Navigation 的官方文档非常详尽，是学习更高级功能、定制选项和解决问题的最佳资源。
3. 探索更多导航器和功能： React Navigation 还提供了 Material Bottom Tab Navigator, Material Top Tab Navigator 等，并支持更高级的过渡动画、手势控制等。
4. 学习状态管理： 结合 Redux, Context API 或其他状态管理库来更有效地管理应用数据和导航状态。

React Navigation 是一个强大而灵活的库，掌握它将极大地提升你构建 React Native 应用的效率和用户体验。从基础开始，不断实践和探索，你将能够为你的应用创建出色的导航系统。

祝你编程愉快！

---