推荐星级:
  • 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

【关注B站账户领20积分】

全部评论(0)

暂无评论

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

  • 打赏
  • 30日榜单

推荐下载