---

React Navigation 入门指南：构建流畅的 React Native 应用导航

作为 React Native 开发者，构建用户界面只是故事的一部分。用户需要在应用的各个屏幕之间进行切换、跳转，这是一个核心功能，称为“导航”。一个优秀的应用导航系统不仅能提供流畅的用户体验，还能有效地管理屏幕之间的状态和数据传递。在 React Native 生态系统中，React Navigation 无疑是事实上的标准和最受欢迎的导航解决方案。

本篇文章将带你深入了解 React Navigation，从零开始，一步步学习如何在你的 React Native 项目中集成并使用它。我们将涵盖其核心概念、安装步骤、最常见的导航器类型（Stack, Tab, Drawer），以及如何在屏幕之间传递数据和进行高级配置。

什么是 React Navigation？为什么选择它？

React Navigation 是一个用于 React Native 应用的导航库。它由社区维护，提供了构建原生导航堆栈、Tab 栏、抽屉菜单等多种导航模式的灵活方式。它的设计理念是基于 JavaScript 构建，但能利用原生平台的导航能力，从而提供高性能和接近原生的体验。

为什么选择 React Navigation？

1. 社区标准： 它是 React Native 生态中最广泛使用和推荐的导航库，拥有活跃的社区支持和丰富的文档。
2. 灵活性： 提供了多种导航器类型，可以轻松组合嵌套，满足复杂应用的需求。
3. 可定制性： 几乎所有导航器的视觉和行为都可以通过配置进行定制。
4. 性能： 利用 react-native-screens 和 react-native-safe-area-context 等依赖，优化了屏幕渲染和内存使用，提升了性能。
5. 声明式 API： 使用声明式组件的方式定义导航结构，与 React/React Native 的开发范式一致。

前置条件

在开始之前，你需要确保你的开发环境已经准备好：

1. Node.js 和 npm/yarn： 安装了 Node.js，通常也包含了 npm。推荐使用 yarn，因为它通常更快更稳定。
2. React Native 开发环境： 已经设置好了 React Native 开发环境，无论是通过 Expo CLI 创建的项目还是使用 React Native CLI 创建的裸项目。
3. 一个 React Native 项目： 准备好一个空白或已有的 React Native 项目，我们将在其中集成 React Navigation。

安装 React Navigation

React Navigation 的安装分为核心库和根据你需要的导航器类型安装额外的库。此外，为了优化性能和处理安全区域，还需要安装一些底层依赖。

打开你的项目终端，执行以下命令：

1. 安装核心库：

“`bash

使用 npm

npm install @react-navigation/native

使用 yarn

yarn add @react-navigation/native
“`

这是 React Navigation 的基础库，提供了导航容器和一些核心工具。

2. 安装底层依赖 (必需)：

为了优化原生性能，React Navigation 依赖于 react-native-screens。同时，为了正确处理设备刘海屏、底部导航条等安全区域，需要 react-native-safe-area-context。

“`bash

使用 npm

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

使用 yarn

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

特别说明：

• Expo 项目： 如果你使用 Expo 管理的项目，可以使用 expo install 来安装，这会确保安装与你 Expo SDK 版本兼容的库版本：
  bash
expo install @react-navigation/native react-native-screens react-native-safe-area-context
• Bare React Native 项目： 对于使用 react-native init 创建的项目，安装完后，对于较旧的 React Native 版本（0.60 之前），可能需要手动链接库 (react-native link)。但对于 React Native 0.60 及以上版本，原生模块链接是自动的（称为 Auto-linking），你通常只需要运行 pod install (iOS) 来安装原生依赖。
  bash
# 进入 ios 目录并安装 Pods (仅限 iOS)
cd ios
pod install
cd ..

3. 安装你需要的导航器库：

React Navigation 将不同的导航器类型拆分到单独的库中，这样你只需要安装你实际使用的部分。最常见的是 Stack 导航器。

• Stack 导航器 (栈导航)： 用于实现常见的 Push/Pop 导航模式，如页面详情页、设置页等。
  “`bash
  # 使用 npm
  npm install @react-navigation/stack

  使用 yarn

  yarn add @react-navigation/stack
  * **Bottom Tabs 导航器 (底部 Tab 栏)：** 用于实现底部 Tab 切换不同的主要功能模块。bash

  使用 npm

  npm install @react-navigation/bottom-tabs

  使用 yarn

  yarn add @react-navigation/bottom-tabs
  * **Drawer 导航器 (抽屉菜单)：** 用于实现侧滑抽屉菜单。bash

  使用 npm

  npm install @react-navigation/drawer

  使用 yarn

  yarn add @react-navigation/drawer
  * **Material Bottom Tabs 导航器 (Material Design 底部 Tab 栏)：** 基于 Material Design 风格的底部 Tab 栏。bash

  使用 npm

  npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

  使用 yarn

  yarn add @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons
  注意：Material 底部 Tab 依赖 `react-native-paper` (一个 Material Design UI 库) 和 `react-native-vector-icons` (图标库)。
* **Material Top Tabs 导航器 (Material Design 顶部 Tab 栏)：** 用于实现页面顶部的 Tab 切换。bash

  使用 npm

  npm install @react-navigation/material-top-tabs react-native-tab-view

  使用 yarn

  yarn add @react-navigation/material-top-tabs react-native-tab-view
  ``
注意：Material 顶部 Tab 依赖react-native-tab-view`。

本文后续将主要以 Stack 和 Bottom Tabs 导航器为例进行讲解。

安装完成后，重启你的开发服务器，以确保所有依赖都被正确加载。

核心概念：NavigationContainer, Navigators 和 Screens

在使用 React Navigation 之前，理解其核心概念至关重要：

1. NavigationContainer (导航容器):

   • 这是整个应用导航树的根组件。
   • 它管理着应用的导航状态，并包含了各个导航器的上下文。
   • 你的所有导航结构都必须包裹在 <NavigationContainer> 内部。
   • 通常只在应用的顶层渲染一次 (例如在 App.js 或 index.js 中)。

2. Navigators (导航器):

   • 导航器是 React Navigation 的核心构建块。
   • 它们负责管理一组屏幕，并提供导航方法（如跳转、返回）。
   • 不同类型的导航器提供不同的导航模式 (栈、Tab 栏、抽屉等)。
   • 导航器本身也是 React 组件，它们接收 <Screen> 组件作为子元素来定义可导航的屏幕。
   • 常见的导航器创建函数有 createStackNavigator, createBottomTabNavigator, createDrawerNavigator 等。这些函数返回一个包含 Navigator 和 Screen 属性的对象。

3. Screens (屏幕):

   • 屏幕代表了应用中的一个可导航的界面。
   • 在 React Navigation 中，一个“屏幕”通常就是一个普通的 React 组件。
   • 你在导航器中通过 <Navigator.Screen> 组件来注册你的屏幕组件，并为其指定一个唯一的名称 (name prop) 和要渲染的组件 (component prop)。
   • Screen 组件还接收一个 options prop，用于配置该屏幕在导航器中的表现 (如 Stack 导航中的标题栏样式，Tab 导航中的 Tab 图标和标签等)。

构建第一个导航：一个简单的 Stack 导航器

Stack 导航器是最基础和常见的导航模式。它像一叠卡片一样工作：新屏幕会叠在当前屏幕上方，当你返回时，顶部的屏幕会被移除，露出下面的屏幕。

我们将创建一个包含两个屏幕的应用：Home 屏幕和 Details 屏幕。从 Home 屏幕可以跳转到 Details 屏幕，从 Details 屏幕可以返回 Home 屏幕。

1. 创建屏幕组件：

首先，创建两个简单的 React Native 组件作为我们的屏幕。

创建一个文件，例如 screens/HomeScreen.js:

“`javascript
// screens/HomeScreen.js
import React from ‘react’;
import { View, Text, Button, StyleSheet } from ‘react-native’;

function HomeScreen({ navigation }) {
return (

首页
navigation.navigate(‘Details’)} // 点击按钮导航到名为 ‘Details’ 的屏幕
/>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
title: {
fontSize: 24,
marginBottom: 20,
},
});

export default HomeScreen;
“`

注意看 HomeScreen 组件接收了一个 navigation prop。这是 React Navigation 自动传递给注册为屏幕的组件的。这个 navigation 对象包含了用于导航的方法（如 navigate, goBack, push 等）。

创建一个文件，例如 screens/DetailsScreen.js:

“`javascript
// screens/DetailsScreen.js
import React from ‘react’;
import { View, Text, Button, StyleSheet } from ‘react-native’;

function DetailsScreen({ navigation }) {
return (

详情页

navigation.goBack()} // 点击按钮返回上一页
/>
navigation.popToTop()} // 回到栈的顶部，即第一个屏幕
color=”green”
/>
navigation.push(‘Details’)} // 推入一个新的详情页实例
color=”orange”
/>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
title: {
fontSize: 24,
marginBottom: 20,
},
});

export default DetailsScreen;
“`

DetailsScreen 也接收 navigation prop，并使用了 goBack 和 popToTop 方法。push 方法与 navigate 类似，但它总是将新屏幕添加到栈顶，即使同名屏幕已经在栈中。navigate 则会尝试跳转到栈中已有的同名屏幕，如果不存在才会创建新的。

2. 设置导航结构：

现在，在你的应用主文件 (如 App.js) 中设置导航结构。

“`javascript
// App.js
import ‘react-native-gesture-handler’; // 确保在应用入口文件的顶部引入

import React from ‘react’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;

// 引入我们创建的屏幕组件
import HomeScreen from ‘./screens/HomeScreen’;
import DetailsScreen from ‘./screens/DetailsScreen’;

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

function App() {
return (

{/ Stack.Navigator 用于包裹所有需要 Stack 导航管理的屏幕 /}

{/ Stack.Screen 定义一个可导航的屏幕 /}




);
}

export default App;
“`

重要提示： react-native-gesture-handler 是许多 React Native 库（包括 React Navigation 的一些动画和手势）所必需的。请确保在应用入口文件的顶部引入 import 'react-native-gesture-handler';。如果你使用 Expo，它通常已经包含并配置好了。如果你使用 Bare React Native 项目，安装 react-native-gesture-handler (npm install react-native-gesture-handler 或 yarn add react-native-gesture-handler) 并按照其文档进行额外设置（主要是修改 index.js 或 App.js）。

现在运行你的应用 (npm start 或 yarn start)，你应该能看到一个带有标题栏的“首页”，点击按钮可以跳转到“详情页”，并且可以使用设备自带的返回手势（如果支持）或 Android 上的物理返回按钮进行返回。

传递数据给屏幕

在实际应用中，从一个屏幕跳转到另一个屏幕时，经常需要传递数据。例如，从商品列表页跳转到商品详情页时，需要告诉详情页显示哪个商品的具体信息。

React Navigation 使用路由参数（Route Params）来处理数据传递。

1. 传递参数：

在源屏幕中，使用 navigation.navigate 或 navigation.push 方法时，可以传递一个对象作为第二个参数。这个对象中的键值对就是你要传递的参数。

javascript
// 在 HomeScreen.js 中修改按钮的 onPress
// 假设我们要传递一个 userId 和一个 itemTitle
<Button
title="前往详情页，并传递参数"
onPress={() => navigation.navigate('Details', {
userId: 123,
itemTitle: '这是一件很棒的商品',
})}
/>

2. 接收参数：

在目标屏幕中，通过 route.params 来访问传递过来的参数。route 是另一个 React Navigation 传递给屏幕组件的 prop。

“`javascript
// 在 DetailsScreen.js 中接收参数并显示
import React from ‘react’;
import { View, Text, Button, StyleSheet } from ‘react-native’;

// 注意这里我们同时接收了 navigation 和 route prop
function DetailsScreen({ route, navigation }) {
// 从 route.params 中获取参数
// 使用 ?. 操作符可以安全地访问可能不存在的参数，避免出错
const { userId, itemTitle } = route.params ?? {};

return (

详情页
{/ 显示接收到的参数 /}
User ID: {userId}
Item Title: {itemTitle}

  {/* 其他按钮... */}
  <Button
    title="回到首页"
    onPress={() => navigation.goBack()}
  />
</View>

);
}

// … styles 和 export 保持不变
“`

现在，当你从首页跳转到详情页时，详情页将显示你传递过来的 userId 和 itemTitle。

定制 Stack 导航器的头部 (Header)

Stack 导航器默认提供一个头部栏 (Header)，用于显示标题和返回按钮。你可以通过屏幕的 options prop 来高度定制这个头部。

在 App.js 中的 Stack.Screen 定义里修改 options:

“`javascript
// 在 App.js 中修改 Stack.Screen 的 options
( // 在头部右侧添加一个按钮
//

alert(‘这是一个右侧按钮!’)}
// title=”信息”
// color=”#fff”
// />
// ),
}}
/>

({ // options 也可以是一个函数，接收 route 和 navigation 参数
title: route.params?.itemTitle ?? ‘详情’, // 动态设置标题为传递过来的商品标题
// 其他样式配置…
headerStyle: {
backgroundColor: ‘#a451ff’,
},
headerTintColor: ‘#fff’,
})}
/>
“`

options prop 可以是一个对象，也可以是一个返回配置对象的函数。当它是函数时，可以访问 route 和 navigation 参数，从而根据当前屏幕的状态或传递的参数进行动态配置。

使用 useNavigation 和 useRoute Hooks (更现代的方式)

在函数组件中，获取 navigation 和 route prop 的另一种更现代、更灵活的方式是使用 React Navigation 提供的 hooks：useNavigation 和 useRoute。这对于那些不是直接作为屏幕组件渲染，但需要访问导航或路由信息的子组件特别有用。

1. 使用 useNavigation：

“`javascript
// 在任何函数组件中，即使它不是直接的屏幕组件
import React from ‘react’;
import { View, Text, Button } from ‘react-native’;
import { useNavigation } from ‘@react-navigation/native’; // 引入 hook

function MyComponentNeedingNavigation() {
const navigation = useNavigation(); // 调用 hook 获取 navigation 对象

return (

这个组件可以使用导航!

navigation.navigate(‘SomeOtherScreen’)}
/>

);
}

export default MyComponentNeedingNavigation;
“`

2. 使用 useRoute：

“`javascript
// 在任何函数组件中，即使它不是直接的屏幕组件
import React from ‘react’;
import { View, Text } from ‘react-native’;
import { useRoute } from ‘@react-navigation/native’; // 引入 hook

function MyComponentNeedingRouteInfo() {
const route = useRoute(); // 调用 hook 获取 route 对象
const { someParam } = route.params ?? {}; // 从 route.params 中获取参数

return (

接收到的参数: {someParam}

);
}

export default MyComponentNeedingRouteInfo;
“`

使用 Hooks 的优势在于你不需要通过层层 prop 传递 navigation 和 route 对象给子组件，任何在导航容器内的组件都可以直接通过 hooks 访问它们。

构建底部 Tab 导航器

底部 Tab 导航器适用于应用有几个一级功能入口，用户可以在它们之间快速切换的场景。

1. 安装 Bottom Tabs 导航器库 (如果你还没安装)：

bash
yarn add @react-navigation/bottom-tabs # 或 npm install

2. 创建 Tab 对应的屏幕组件：

创建几个简单的屏幕组件，比如 FeedScreen, SettingsScreen, ProfileScreen。

“`javascript
// screens/FeedScreen.js
import React from ‘react’;
import { View, Text, StyleSheet } from ‘react-native’;

function FeedScreen() {
return (

动态/内容列表

);
}
const styles = StyleSheet.create({ / … / });
export default FeedScreen;

// screens/SettingsScreen.js
import React from ‘react’;
import { View, Text, StyleSheet } from ‘react-native’;

function SettingsScreen() {
return (

设置

);
}
const styles = StyleSheet.create({ / … / });
export default SettingsScreen;

// screens/ProfileScreen.js
import React from ‘react’;
import { View, Text, StyleSheet } from ‘react-native’;

function ProfileScreen() {
return (

个人中心

);
}
const styles = StyleSheet.create({ / … / });
export default ProfileScreen;
“`

3. 设置 Bottom Tabs 导航结构：

在 App.js (或其他合适的地方) 中，使用 createBottomTabNavigator 创建 Tab 导航器。

“`javascript
// App.js (部分代码)
import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;

// 引入 Tab 屏幕组件
import FeedScreen from ‘./screens/FeedScreen’;
import SettingsScreen from ‘./screens/SettingsScreen’;
import ProfileScreen from ‘./screens/ProfileScreen’;

// 创建一个 Bottom Tab Navigator
const Tab = createBottomTabNavigator();

function App() {
return (

{/ Tab.Navigator 包裹 Tab 屏幕 /}
{
// // 为每个 Tab 设置图标，这里需要根据路由名称判断是哪个 Tab
// let iconName;
// const routeName = route.name; // route prop 可通过 useRoute() 获取或作为 screenOptions 函数参数获取

      //   if (routeName === 'Feed') {
      //     iconName = focused ? 'home' : 'home-outline';
      //   } else if (routeName === 'Settings') {
      //     iconName = focused ? 'settings' : 'settings-outline';
      //   } else if (routeName === 'Profile') {
      //      iconName = focused ? 'person' : 'person-outline';
      //   }

      //   // 你需要安装并引入一个图标库，例如 react-native-vector-icons
      //   // return <Ionicons name={iconName} size={size} color={color} />;
      // },
    }}
  >
    {/* Tab.Screen 定义一个 Tab 页 */}
    <Tab.Screen
      name="Feed"
      component={FeedScreen}
      options={{
        title: '动态', // Tab 标签显示的文本
        // tabBarIcon: () => (/* 这里的图标配置会覆盖 screenOptions 中的通用配置 */)
      }}
    />
    <Tab.Screen
      name="Settings"
      component={SettingsScreen}
      options={{ title: '设置' }}
    />
     <Tab.Screen
      name="Profile"
      component={ProfileScreen}
      options={{ title: '我的' }}
    />
  </Tab.Navigator>
</NavigationContainer>

);
}

export default App;
“`

运行应用，你现在应该看到一个底部有三个 Tab 按钮的界面，点击不同的 Tab 可以切换到对应的屏幕。设置 Tab 图标通常需要使用像 react-native-vector-icons 这样的库，并在 screenOptions 或每个 Tab.Screen 的 options 中使用 tabBarIcon 函数来渲染图标。

构建 Drawer (抽屉) 导航器

抽屉导航器适用于将一些不太常用或辅助性的功能入口放在侧边栏中。

1. 安装 Drawer 导航器库 (如果你还没安装)：

bash
yarn add @react-navigation/drawer # 或 npm install

Drawer 导航器依赖 react-native-gesture-handler 和 react-native-reanimated。确保这些库已安装并正确配置（特别是 react-native-reanimated，需要在你的 babel.config.js 中进行配置）。

javascript
// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
// 确保 reanimated/plugin 是最后一个插件
'react-native-reanimated/plugin',
],
};
更改 babel.config.js 后，你需要完全重启 Metro Bundler（关闭终端窗口并重新运行 npm start 或 yarn start）。

2. 创建 Drawer 菜单项对应的屏幕组件：

创建一些简单的屏幕组件，比如 ArticleScreen, ArchiveScreen。

“`javascript
// screens/ArticleScreen.js
import React from ‘react’;
import { View, Text, StyleSheet, Button } from ‘react-native’;

function ArticleScreen({ navigation }) {
return (

文章列表

navigation.openDrawer()} />
navigation.navigate(‘Archive’)} />

);
}
const styles = StyleSheet.create({ / … / });
export default ArticleScreen;

// screens/ArchiveScreen.js
import React from ‘react’;
import { View, Text, StyleSheet, Button } from ‘react-native’;

function ArchiveScreen({ navigation }) {
return (

归档

navigation.closeDrawer()} />
navigation.goBack()} />

);
}
const styles = StyleSheet.create({ / … / });
export default ArchiveScreen;
“`

3. 设置 Drawer 导航结构：

在 App.js (或其他合适的地方) 中，使用 createDrawerNavigator 创建 Drawer 导航器。

“`javascript
// App.js (部分代码)
import { createDrawerNavigator } from ‘@react-navigation/drawer’;

// 引入 Drawer 屏幕组件
import ArticleScreen from ‘./screens/ArticleScreen’;
import ArchiveScreen from ‘./screens/ArchiveScreen’;

// 创建一个 Drawer Navigator
const Drawer = createDrawerNavigator();

function App() {
return (

{/ Drawer.Navigator 包裹 Drawer 屏幕 /}

{/ Drawer.Screen 定义一个 Drawer 菜单项 /}




);
}

export default App;
“`

运行应用，你应该可以通过从屏幕左侧边缘向内滑动来打开抽屉菜单，菜单中会显示“所有文章”和“文章归档”两个选项。点击选项可以切换屏幕。你也可以在屏幕中使用 navigation.openDrawer() 和 navigation.closeDrawer() 来控制抽屉的打开和关闭。

组合导航器 (嵌套导航)

在实际应用中，你通常会需要组合不同类型的导航器。例如，你的应用可能有底部 Tab 栏作为一级导航，但每个 Tab 内部又是一个 Stack 导航器，用于管理该模块内的页面 Push/Pop 跳转。

这是非常常见的模式。React Navigation 允许你将一个导航器作为另一个导航器中的一个屏幕来渲染。

示例：Stack 导航器嵌套在 Bottom Tabs 导航器内部

我们将创建一个底部 Tab 栏，其中一个 Tab (“HomeTab”) 实际上是一个 Stack 导航器，包含 Home 和 Details 屏幕。另一个 Tab (“Settings”) 是一个简单的屏幕。

1. 创建 Stack 导航器组件：

将之前创建的 Stack 导航器代码提取到一个单独的组件中。

“`javascript
// navigators/HomeStackNavigator.js
import React from ‘react’;
import { createStackNavigator } from ‘@react-navigation/stack’;

import HomeScreen from ‘../screens/HomeScreen’;
import DetailsScreen from ‘../screens/DetailsScreen’;

const Stack = createStackNavigator();

function HomeStackNavigator() {
return (




);
}

export default HomeStackNavigator;
“`

2. 创建 Settings 屏幕组件：

“`javascript
// screens/SettingsScreen.js (使用之前的或创建一个简单的)
import React from ‘react’;
import { View, Text, StyleSheet } from ‘react-native’;

function SettingsScreen() {
return (

设置

);
}
const styles = StyleSheet.create({ / … / });
export default SettingsScreen;
“`

3. 设置 Bottom Tabs 导航器，将 Stack 导航器作为 Tab 屏幕：

在 App.js 中设置 Tab 导航。

“`javascript
// App.js
import ‘react-native-gesture-handler’; // 确保引入

import React from ‘react’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;

// 引入我们创建的 Stack 导航器组件和 Settings 屏幕
import HomeStackNavigator from ‘./navigators/HomeStackNavigator’;
import SettingsScreen from ‘./screens/SettingsScreen’;

const Tab = createBottomTabNavigator();

function App() {
return (


{/ 将 HomeStackNavigator 作为名称为 “HomeTab” 的 Tab 屏幕 /}

{/ 将 SettingsScreen 作为名称为 “Settings” 的 Tab 屏幕 /}



);
}

export default App;
“`

现在运行应用，底部会有一个 Tab 栏。点击“首页”Tab 会进入 Stack 导航的 Home 屏幕，你可以在其中跳转到 Details 屏幕并返回。点击“设置”Tab 会切换到设置屏幕。

导航到嵌套导航器内的屏幕：

当你有嵌套导航时，导航到内部屏幕需要指定路径。例如，从设置屏幕导航到“首页”Tab 内的“详情”屏幕：

“`javascript
// 在 SettingsScreen.js 或其他地方
import { useNavigation } from ‘@react-navigation/native’;

function SettingsScreen() {
const navigation = useNavigation();

return (

设置

navigation.navigate(‘HomeTab’, { screen: ‘Details’ })}
/>

);
}
“`

这种 navigation.navigate('OuterNavigatorScreenName', { screen: 'InnerNavigatorScreenName', params: {...} }) 的语法是导航到嵌套导航器内部屏幕的标准方式。

总结与进阶

本指南涵盖了 React Navigation 的基础：安装、核心概念、Stack、Bottom Tabs、Drawer 这三种最常见的导航器，屏幕之间的数据传递，头部定制以及导航器的嵌套。

React Navigation 是一个功能强大的库，除了这些基础知识，它还提供了许多高级特性，例如：

• 认证流程 (Authentication Flow): 根据用户登录状态切换导航器结构，管理登录、注册、应用主页之间的跳转。
• 自定义导航器: 构建完全自定义的导航器。
• 深层链接 (Deep Linking): 配置应用可以通过外部链接（如网页链接、其他应用链接）直接跳转到特定的屏幕。
• 持久化导航状态: 保存和恢复用户的导航历史。
• 屏幕事件订阅: 监听屏幕的生命周期事件，如获取焦点 (focus)、失去焦点 (blur) 等，可以使用 useFocusEffect hook。
• 高级配置: 更多关于手势、动画、模态视图、适配大屏幕设备的配置选项。

掌握了本指南中的内容，你就已经具备了构建绝大多数 React Native 应用导航所需的基础。接下来，鼓励你查阅 React Navigation 的官方文档 (https://reactnavigation.org/)，深入了解更多高级特性和最佳实践，根据你的项目需求进行更灵活和强大的导航设计。

祝你在 React Native 导航的世界中探索愉快！

---