React Navigation 使用指南

于 2025-04-29 21:22:42 发布
阅读量952 收藏 14
点赞数 18
分类专栏： React Native 实战专栏 文章标签： react native react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013176440/article/details/147620001
版权

React Navigation 使用指南

image-20250429203558592

React Navigation 介绍

React Navigation 是 React Native 中推荐的路由管理方案。

1. 开箱即用，快速上手（Easy to Use）
  • 提供 内置导航器（Built-in Navigators），如栈导航（Stack Navigator）、标签导航（Tab Navigator）、抽屉导航（Drawer Navigator）等，无需从零搭建导航逻辑，大幅降低开发成本。
  • 支持快速配置基础导航功能（如页面跳转、返回、参数传递），适合新手快速入门和项目快速迭代。
2. 跨平台适配，原生体验（Components for iOS & Android）

  • 自动适配 iOS 和 Android 平台的视觉规范与交互逻辑，例如：

    • iOS 的滑动返回手势、底部标签栏样式；
    • Android 的硬件返回键处理、顶部标题栏布局。

  • 内置平滑的页面切换动画（如渐变、滑动）和手势交互，确保用户体验接近原生应用。

React Navigation 初体验

img

  1. 安装依赖

  2. @react-navigation/native：React Native 导航核心

  3. @react-navigation/native-stack：原生级栈导航

  4. @react-navigation/elements：预制导航栏 UI 组件（按钮 / 标题），快速美化导航栏

  5. react-native-screens：把页面渲染成原生视图，让导航动画丝滑

  6. react-native-safe-area-context：防刘海屏 / 挖孔屏遮挡，给内容留安全空间

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

  1. 基本结构

    1. 创建页面组件
    2. 创建堆栈导航器
    3. 配置路由结构
    4. 应用入口组件

  3. ReactNavigation-基本结构

import { View, Text, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// 1. 创建页面组件
// 首页组件
function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home Scre1en</Text>
    </View>
  );
}

// 详情页组件
function DetailsScreen() {
  return (
    <View style={styles.container}>
      <Text>HomeDetailsScreen Scre1en</Text>
    </View>
  );
}

// 2. 创建堆栈导航器
const Stack = createNativeStackNavigator();

// 3. 配置路由结构
function RootStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      {/* 注册路由 - 首页 */}
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 注册路由 - 详情页 */}
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

// 4. 应用入口组件
export default function App() {
  return (
    // 包裹在NavigationContainer中以启用导航功能
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

// 5. 定义样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

React Navigation 基本属性

我们要配置属性的位置主要在两个地方

  1. Stack.Navigator
  2. Stack.Screen

Stack.Navigator

配置名称功能描述类型
ID导航器的可选唯一标识符，用于在子导航器中通过 navigation.getParent() 引用当前导航器。字符串（可选）
initialRouteName导航器首次加载时渲染的路由名称。字符串（可选，默认值取决于导航器类型）
layout导航器的布局包装器，用于在导航器外层添加额外 UI（如面包屑、全局容器等），可访问导航器状态、描述符和导航方法。函数，参数为 { children, state, descriptors, navigation }，返回 React 元素
screenOptions导航器中所有屏幕的默认配置选项，可统一设置屏幕级属性（如标题、动画等）。对象 或 函数（返回对象，参数为 { route, navigation, screen }）
screenListeners注册屏幕级事件监听器（如屏幕聚焦、模糊事件）。对象，键为事件名（如 focus、blur），值为回调函数
screenLayout每个屏幕的布局包装器，用于为所有屏幕添加公共包裹组件（如错误边界、加载状态等）。函数，参数为 { children }，返回 React 元素

Stack.Screen

配置方式功能描述类型
Screen 组件的 options为单个屏幕配置专属选项（如标题、导航栏按钮等），优先级最高。对象 或 函数（返回对象）
Group 组件的 screenOptions为分组内的所有屏幕配置共享选项，适用于批量设置同类屏幕的公共选项（如模态窗口样式）。对象 或 函数（返回对象）
导航器的 screenOptions为导航器内的所有屏幕配置全局默认选项（如统一的导航栏背景色、标签栏图标样式）。对象 或 函数（返回对象）
navigation.setOptions 方法在组件内部动态更新当前屏幕的选项（如按钮点击时修改标题）。方法调用，传入选项对象

React Navigation 跳转

  1. 定义调整到路由的类型
  2. 指定跳转 navigate
  3. 返回上一个页面 goBack

ReactNavigation-路由跳转流程

// In App.js in a new project

import { View, Text, StyleSheet } from "react-native";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";

// 1 定义导航类型
type RootStackParamList = {
  Home: undefined;
  Details: undefined;
};
type HomeScreenNavigationProp = NativeStackNavigationProp<RootStackParamList>;

function HomeScreen() {
  const navigation = useNavigation<HomeScreenNavigationProp>();
  return (
    <View style={styles.container}>
      {/* 2 跳转 */}
      <Text onPress={() => navigation.navigate("Details")}>Home Scre1en</Text>
    </View>
  );
}
function DetailsScreen() {
  const navigation = useNavigation<HomeScreenNavigationProp>();
  return (
    <View style={styles.container}>
      {/* 3 返回 */}
      <Text onPress={() => navigation.goBack()}>HomeDetailsScreen Scre1en</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

navigate 和 push 的区别

  1. navigate 会复用页面
  2. push 会不断往路由栈中添加页面
      <Text onPress={() => navigation.navigate('Details')}>
        Details navigate
      </Text>
      <Text onPress={() => navigation.push('Home')}>Home push</Text>

React Navigation 携带参数 接收参数

  1. 定义参数类型
  2. 传递参数
  3. 接收参数

ReactNavigation-参数传递

// In App.js in a new project

import { View, Text, StyleSheet } from "react-native";
import {
  NavigationContainer,
  useNavigation,
  useRoute,
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { RouteProp } from "@react-navigation/native";

interface NewType {
  itemId: number;
  otherParam: string;
}

// 定义导航类型
type RootStackParamList = {
  Home: undefined;
  // 定义参参数类型
  Details: NewType;
};
type HomeScreenNavigationProp = NativeStackNavigationProp<RootStackParamList>;
type DetailsScreenRouteProp = RouteProp<RootStackParamList, "Details">;

function HomeScreen() {
  const navigation = useNavigation<HomeScreenNavigationProp>();
  return (
    <View style={styles.container}>
      {/* 跳转 */}
      <Text onPress={() => navigation.navigate("Home")}>Home Scre1en</Text>
      <Text
        onPress={() =>
          navigation.navigate(
            "Details",
            // 1 传递参数
            {
              itemId: 86,
              otherParam: "anything you want here",
            }
          )
        }
      >
        Details navigate
      </Text>
    </View>
  );
}

function DetailsScreen() {
  const navigation = useNavigation<HomeScreenNavigationProp>();
  // 2 接收参数
  const route = useRoute<DetailsScreenRouteProp>();
  const { itemId, otherParam } = route.params;

  return (
    <View style={styles.container}>
      {/* 返回 */}
      <Text onPress={() => navigation.goBack()}>HomeDetailsScreen Scre1en</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
    </View>
  );
}
// 2. 创建堆栈导航器
const Stack = createNativeStackNavigator();

// 3. 配置路由结构
function RootStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      {/* 注册路由 - 首页 */}
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 注册路由 - 详情页 */}
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

// 4. 应用入口组件
export default function App() {
  return (
    // 包裹在NavigationContainer中以启用导航功能
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

React Navigation 嵌套路由

ReactNavigation-嵌套路由

  1. 配置顶层路由
<Stack.Navigator initialRouteName="HomeTabs">
  {/* 注册路由 - 首页 */}
  <Stack.Screen name="HomeTabs" component={HomeTabs} />
  {/* 注册路由 - 详情页 */}
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
  1. 配置二级路由
function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeScreen" component={HomeScreen} />
      <Tab.Screen name="Messages" component={MessagesScreen} />
    </Tab.Navigator>
  );
}

完整代码

// In App.js in a new project

import { View, Text, StyleSheet } from "react-native";
import {
  NavigationContainer,
  useNavigation,
  useRoute,
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { RouteProp } from "@react-navigation/native";

interface NewType {
  itemId: number;
  otherParam: string;
}

// 定义导航类型
type RootStackParamList = {
  Home: undefined;
  // 定义参参数类型
  Details: NewType;
};
type HomeScreenNavigationProp = NativeStackNavigationProp<RootStackParamList>;
type DetailsScreenRouteProp = RouteProp<RootStackParamList, "Details">;

// Create Tab navigator
const Tab = createBottomTabNavigator();

function MessagesScreen() {
  return (
    <View style={styles.container}>
      <Text>Messages Screen</Text>
    </View>
  );
}

function HomeScreen() {
  const navigation = useNavigation<HomeScreenNavigationProp>();
  return (
    <View style={styles.container}>
      <Text
        onPress={() =>
          navigation.navigate("Details", {
            itemId: 86,
            otherParam: "anything you want here",
          })
        }
      >
        Go to Details
      </Text>
    </View>
  );
}

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeScreen" component={HomeScreen} />
      <Tab.Screen name="Messages" component={MessagesScreen} />
    </Tab.Navigator>
  );
}

function DetailsScreen() {
  const navigation = useNavigation<HomeScreenNavigationProp>();
  const route = useRoute<DetailsScreenRouteProp>();
  const { itemId, otherParam } = route.params;
  console.log(route);

  return (
    <View style={styles.container}>
      {/* 返回 */}
      <Text onPress={() => navigation.goBack()}>HomeDetailsScreen Scre1en</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
    </View>
  );
}
// 2. 创建堆栈导航器
const Stack = createNativeStackNavigator();

// 3. 配置路由结构
function RootStack() {
  return (
    <Stack.Navigator initialRouteName="HomeTabs">
      {/* 注册路由 - 首页 */}
      <Stack.Screen name="HomeTabs" component={HomeTabs} />
      {/* 注册路由 - 详情页 */}
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

// 4. 应用入口组件
export default function App() {
  return (
    // 包裹在NavigationContainer中以启用导航功能
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

React Navigation 总结

React Navigation 作为 React Native 官方推荐的路由管理方案，为开发者提供了丰富且灵活的导航解决方案。通过本文的学习，我们掌握了以下关键知识点：

核心概念

  • NavigationContainer：所有导航结构的根容器，管理导航状态

  • Stack.Navigator：实现页面堆栈式切换，支持前进后退

  • Tab.Navigator：实现标签页式切换，常用于底部菜单

主要特性

  • 简单易用：提供直观的 API，快速配置导航结构

  • 类型支持：通过 TypeScript 定义可以获得完整的类型提示和检查

  • 参数传递：页面间可以方便地传递和接收参数

  • 嵌套导航：支持多层次导航结构，如标签页内嵌套堆栈导航

实用技巧

  • 导航方法：navigate 和 push 的区别，前者会复用已存在的页面，后者总是创建新页面

  • 路由参数：通过 route.params 接收传递的参数

  • 导航配置：通过 screenOptions 和 options 自定义导航外观和行为

React Navigation 不仅提供了基础的导航功能，还能适配不同平台的视觉和交互特性，让应用拥有更自然的用户体验。随着项目复杂度增加，可以利用嵌套导航和路由参数传递等高级特性构建复杂的应用界面和交互流程。

通过合理设计导航结构和使用适当的导航器组合，开发者可以创建直观、流畅且易于维护的 React Native 应用，为用户提供接近原生的应用体验。

React Native未来导航库：react-navigation 使用详解（基础篇）
...
05-17 9万+
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 上篇博客和大家分享了关于React Native jsBundle预加载，界面启动优化的内容，详情可点击： 基于最新版本React Native实现JsBundle预加载，界面秒开优化 一、开源库介绍 今年1月份，新开源的react-natvigation库备受瞩目。在短短不到3个月的时间，gith...
react-native 配合react-navigation 入门demo
04-07
react-native 配合react-navigation 入门demo,使用api包括， createMaterialTopTabNavigator, createAppContainer， createBottomTabNavigator, createAppContainer，以及使用了图标react-native-vector-icons。
React-Native导航组件React-Navigation的详细介绍
suwu150
10-20 8342
React-Native导航组件React-Navigation的详细介绍一、 导航栏分类二、 具体说明(一). StackNavigator 导航栏1.5 界面跳转和数据传递(1).navigate()-调用这个方法可以跳转到导航器中的其他页面(2) goBack() -关闭当前活跃屏,相当于功能(3)addListener() – 订阅导航生命周期事件变化(4) isFocused() – 查看屏的聚焦状态(5)state – 屏幕的当前状态/路由。
集成react-navigation路由导航与避坑指南
qq_42430654的博客
04-26 1480
作为一个RN新人，在简单了解了控件使用后，一个重头就在于路由跳转React Native 官网指出现在主推的路由跳转方案是react-navigation，那么对于其他方案这边就不做了解了。react-navigation官网在集成这个东西的时候，踩过很多坑，业余时间吃了一个多礼拜，因此，这篇博文的目的在于简介react-navigation集成的流程，以及遇到各种问题的解决办法。
[React Native]Stack、Tab和Drawer导航器详解
最新发布
警警的博客
03-12 1151
好的，我现在需要帮用户总结React Native和Expo Router的一句话，不超过200字，并且要引用提供的搜索结果中的网页。首先，我需要理解用户的需求，他们可能是在比较这两个技术，或者需要快速了解两者的区别和各自的特点。首先，React Native是Facebook开源的跨平台移动开发框架，使用JavaScript和React构建原生应用，适合需要灵活定制和复杂功能的场景。根据网页[1]，React Native CLI适合有经验的开发者，而Expo则简化了开发流程，适合快速构建MVP或新手
【React Native】react-navigation导航使用方法
dolacmeng的专栏
05-21 2846
上一篇介绍了如何在已有iOS项目中集成React Native。这一篇我们把上一篇的demo做下拓展，添加点击电影跳转到详情页。页面跳转使用React Native推荐的第三方导航控件：react-navigation 集成react-navigation 根据官方指引，在终端cd到项目根目录，分别输入以下命令进行集成： npm install --save react-native-navi...
ReactNative进阶（七）：导航组件 react-navigation_react native导航栏组件
2401_87029798的博客
09-10 2173
在RN项目开发过程中，经常会看到如下形式的路由跳转。render() {return (在RN多页面应用程序开发过程中，页面跳转是通过路由或导航器来实现的。在0.44版本之前，开发者可以直接使用官方提供的Navigator。
React Native中的路由导航：React Navigation使用指南
React Navigation在React Native开发中扮演了至关重要的角色，负责管理应用程序的导航和路由功能。本章将深入探讨React Navigation的作用和重要性，以及它是如何与React Native进行集成的。 ## 1.1 React Navigation...
React Navigation使用指南：为你的React Native应用添加导航功能
## 1. 简介 ### 1.1 React Native应用导航的重要性 在开发React Native应用程序时，良好的导航功能...在本文中，我们将介绍如何安装、配置和使用React Navigation，以及一些高级功能和技巧。 （文章正文内容......
React Query与React Navigation集成指南
query重新导出了所有内容，这意味着你可以简单地将项目中任何地方的从react-query的导入替换为react-query-navigation-native的导入，并且可以像之前使用react-query一样继续使用react-query-navigation-native提供...
React Native TypeScript项目模板：Redux、Saga与React Navigation实践指南
资源摘要信息:"react-native-typescript-template:模板使用Redux，Saga，React Navigation响应本机打字稿项目" 知识点详细说明： 1. React Native: React Native 是由 Facebook 开发的一个用于构建移动应用的框架...
React Native项目集成Redux与React Navigation脚手架指南
标题“reactnative项目提取的基础脚手架reactnavigation集成redux”中蕴含了几个关键知识点，它们分别是：React Native、脚手架、React Navigation、集成、Redux。 1. **React Native**：是一个由Facebook开发的...
React Navigation 基本使用
SpringWaterLikeMe
02-20 2327
React Navigation 基本使用 参考资料 https://reactnavigation.org/docs/ 环境搭建 Minimum requirementsreact-native >= 0.63.0 expo >= 41 (if you use Expo) typescript >= 4.1.0 (if you use TypeScript) Installation npm install @react-navigation/native npm install
react-navigation导航器
qq_53761321的博客
06-08 613
但是这个导航器有个缺点，点击底部导航，顶部title不会改变需要处理。App.tsx 导入。
React Native 全栈开发实战班 - 核心组件与导航
知道者
11-11 868
Stack Navigator（堆栈导航器）Tab Navigator（标签导航器）Drawer Navigator（抽屉导航器）Bottom Tabs Navigator（底部标签导航器）Native Stack Navigator（原生堆栈导航器）支持 iOS 和 Android 平台。可以自定义导航栏、动画、样式等。拥有庞大的社区和丰富的插件生态。提供简洁的 API，易于上手。
深入了解React Native的导航解决方案：React Navigation与React Native Navigation对比
AI天才研究院
01-11 1403
1.背景介绍 React Native是一种使用React和JavaScript编写的跨平台移动应用开发框架，它使用了JavaScript和React的强大功能来构建原生样式的移动应用。React Native的导航是应用程序中最重要的部分之一，它决定了用户如何导航应用程序中的不同屏幕。在React Native中，有两个主要的导航库：React Navigation和React Native ...
React_Navigation中文文档
weixin_49132888的博客
11-05 345
React Native没有像web浏览器那样内置用于导航的API。React Navigation为您提供了这一功能，以及iOS和Android在屏幕之间转换的手势和动画。堆栈Navigator是一个组件，它将路由配置作为其子级，并为配置提供额外的道具，并呈现我们的内容。每个堆栈。Screen组件采用一个名称道具，该名称道具指的是路由的名称，而组件道具则指定要为路由渲染的组件。这是两个必需的道具。要指定堆栈中的初始路由，请提供initialRouteName作为导航器的道具。
React-Navigation简单使用
journeyIT的博客
01-23 707
一、简介 根据React Navigation官网文档描述：Learn once, navigate anywhere. React Navigation的诞生，源于React Native社区对基于Javascript的可扩展且使用简单的导航解决方案的需求。 React Navigation是Facebook，Expo和React社区的开发者们合作的结果：它取代并改进了React Nativ...
react-navigation使用心得
zramals的博客
06-15 6784
react-navigation使用心得官网地址：https://reactnavigation.org一、主要构成：（1） StackNavigator: 类似于普通的Navigator，屏幕上方导航栏 （2） TabNavigator: 相当于iOS里面的TabBarController，屏幕下方的标签栏 （3） DrawerNavigator: 抽屉效果，侧边滑出三个种类的Navigato
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万少-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值