[RN]React Native导航

React Navigation是React Native中最常用的导航库，主要提供三种导航方式：StackNavigator、TabNavigator和DrawerNavigator。这三种导航器分别对应不同的使用场景，比如Stack用于页面间的跳转和返回，用于app界面窗口之间的切换，Tab用于底部或顶部的标签切换，Drawer用于侧边栏的抽屉式导航`。

提到还有Full-screen Modal这种全屏弹出层，但可能属于StackNavigator的一部分。另外，和还提到了其他导航库，比如React Native Navigation和Expo Router，但问题可能更关注React Navigation。

需要详细说明每种导航器的功能和配置方法。比如，StackNavigator使用栈结构管理页面，可以设置header；TabNavigator支持底部或顶部的标签，保持页面状态；DrawerNavigator侧边滑动，节省空间。此外，给出了一些代码示例，可以引用说明如何配置路由参数和跳转方法。

另外，导航的组合使用也很重要，比如和提到嵌套导航的策略，比如在Tab中嵌套Stack，或者在Drawer中结合Tab。需要注意合理组织导航结构，避免过于复杂。

React Navigation

React Native中导航组件的选择与实现主要依赖于社区广泛使用的react-navigation库，其提供了多种导航模式以适应不同场景需求。以下是各类导航的详细解析：

1. 栈导航（Stack Navigator）

• 功能：用于页面间的层级跳转，遵循“先进后出”的栈结构，支持页面间的转场动画（如推入、弹出）。
• 配置：
  • 通过createStackNavigator定义路由配置（RouteConfigs），每个路由对应一个组件。
  • 可自定义导航栏标题、字体、颜色等样式。
• 核心方法：
  • navigation.navigate('PageName')：跳转到指定页面。
  • navigation.goBack()：返回上一页。
  • setParams和state：用于参数传递与状态管理。
• 适用场景：适用于需要层级跳转的流程，如从列表页进入详情页，或表单分步填写。

2. 标签导航（Tab Navigator）

• 功能：通过底部或顶部的标签切换不同页面，保持各标签页状态不销毁。
• 类型：
  • 底部标签：常用createBottomTabNavigator，支持图标和文字。
  • 顶部标签：如结合createMaterialTopTabNavigator实现滑动切换。
• 配置：
  • 定义多个Tab.Screen，每个标签对应一个组件。
  • 可通过tabBarIcon设置图标，tabBarLabel自定义标签文本。
• 适用场景：主功能模块切换，如电商应用的“首页”、“购物车”、“个人中心”。

3. 抽屉导航（Drawer Navigator）

• 功能：通过侧边栏（抽屉）展开导航菜单，节省屏幕空间。
• 配置：
  • 使用createDrawerNavigator，定义抽屉内的页面列表。
  • 可设置抽屉位置（左/右侧）、宽度及动画效果。
• 交互：通过手势滑动或按钮触发。
• 适用场景：辅助功能入口，如“设置”、“帮助中心”等非高频操作。

4. 其他导航模式

• 模态框（Modal） ：全屏弹出层，需关闭后才能操作下层内容，可通过StackNavigator配置为mode: 'modal'实现。
• 混合导航：组合多种导航器，例如：
  • Tab中嵌套Stack：每个标签页内使用栈导航管理子页面。
  • Drawer与Tab共存：侧边栏控制主框架的标签导航。

5. 跨平台与进阶功能

• 一致性：react-navigation默认适配iOS/Android平台特性（如iOS右滑返回），同时允许自定义平台差异。
• 状态管理：结合Redux或MobX管理导航状态，支持动态路由和权限控制。
• 生命周期与钩子：通过useNavigation、useFocusEffect等钩子处理页面加载、数据刷新等逻辑。

6. 对比其他导航库

• React Native Navigation：基于原生组件，性能更优，但配置复杂且对Expo支持有限。
• Expo Router：基于文件系统的路由，适合Expo项目快速开发，但灵活性较低。

代码示例（简化）

// Stack + Tab 混合导航
import {
    createStackNavigator, createBottomTabNavigator } from '@react-navigation/native';