推荐星级:
  • 1
  • 2
  • 3
  • 4
  • 5

React Navigation 路由详解

更新时间:2026-03-31 08:17:22 大小:16K 上传用户:潇潇江南查看TA发布的资源 标签:React Native 下载积分:2分 评价赚积分 (如何评价?) 打赏 收藏 评论(0) 举报

资料介绍

一、概述

React Navigation 是 React Native 生态中最常用的路由库,用于管理应用中的屏幕导航。它提供了多种导航模式(如堆栈导航、标签导航、抽屉导航等),支持深度链接、导航参数传递、屏幕切换动画等核心功能,且跨平台兼容 iOS 和 Android。

二、核心概念

1. 导航容器(Navigation Container)

所有导航结构的根组件,必须包裹在应用的最外层。它负责管理导航状态和历史记录。

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

function App() {

return (

<NavigationContainer>

{/* 导航结构 */}

</NavigationContainer>

);

}

2. 导航器(Navigators)

定义屏幕之间的导航逻辑,常见类型包括:

  • Stack Navigator:通过堆栈管理屏幕,新屏幕压入栈顶,返回时弹出(类似浏览器历史)。

  • Tab Navigator:底部或顶部标签栏,切换不同屏幕组。

  • Drawer Navigator:侧边抽屉式导航,通常用于次要导航选项。

3. 屏幕(Screens)

应用中的具体页面组件,通过导航器注册并关联路由名称。

4. 导航 Prop(navigation)

由导航器传递给屏幕组件的对象,包含核心方法:

  • navigate(name, params):跳转到指定路由,可传递参数。

  • goBack():返回上一屏幕。

  • push(name, params):将新屏幕压入堆栈(即使已存在)。

  • replace(name, params):替换当前屏幕,无法返回。

部分文件列表

文件名 大小
React_Navigation_路由详解.docx 16K

【关注公众号领20积分】

全部评论(0)

暂无评论

上传资源 上传优质资源有赏金

  • 打赏
  • 30日榜单
  • 13806677280 打赏1.00元   1天前

    资料:SONY ICF SW77 维修手册

  • 21下载积分 打赏20.00元   3天前

    用户:white工

  • Lzhf918@ 打赏10.00元   3天前

    资料:海尔LS55H310G液晶电源板电路图

  • 21ic下载 打赏310.00元   3天前

    用户:mulanhk

  • 21ic下载 打赏310.00元   3天前

    用户:lanmukk

  • 21ic下载 打赏310.00元   3天前

    用户:zhengdai

  • 21ic下载 打赏240.00元   3天前

    用户:江岚

  • 21ic下载 打赏240.00元   3天前

    用户:潇潇江南

  • 21ic下载 打赏210.00元   3天前

    用户:gsy幸运

  • 21ic下载 打赏70.00元   3天前

    用户:小猫做电路

  • 21ic下载 打赏120.00元   3天前

    用户:jh0355

  • 21ic下载 打赏110.00元   3天前

    用户:jh03551

  • 21ic下载 打赏70.00元   3天前

    用户:liqiang9090

  • 21ic下载 打赏45.00元   3天前

    用户:有理想666

  • 21ic下载 打赏20.00元   3天前

    用户:w178191520

  • 21ic下载 打赏40.00元   3天前

    用户:烟雨

  • 21ic下载 打赏20.00元   3天前

    用户:eaglexiong

  • 21ic下载 打赏20.00元   3天前

    用户:sun2152

  • 21ic下载 打赏20.00元   3天前

    用户:xuzhen1

  • 21ic下载 打赏15.00元   3天前

    用户:kk1957135547

  • 21ic下载 打赏15.00元   3天前

    用户:w993263495

推荐下载