React 导航 是做什么的?
概述
使用 React Navigation 构建导航 UI 的指南。
此技能仅适用于 React Navigation 7。API 和模式可能不适用于其他版本。
API 选择
React Navigation 提供两种 API——基于对象的“静态 API”和基于组件的“动态 API”。
- 现有应用:检查当前导航设置,在使用参考时遵循相同的 API 风格
- 新应用:如果应用尚未设置导航,建议优先使用“静态 API”
何时应用
在以下情况下参考此技能:
- 构建导航 UI 模式,如堆栈、标签页、抽屉、表单等
- 配置标头和其他内置导航器 UI
- 处理导航 UI 中的安全区域和边距
参考文献
| 文件 | 描述 |
|---|---|
| stacks.md | 基于堆栈的导航 |
| form-sheet.md | 底部表单和表单页面 |
| bottom-tabs.md | 跨平台底部标签页 |
| native-bottom-tabs.md | 原生底部标签页 |
| material-top-tabs.md | 可滑动的顶部标签页 |
| drawers.md | 抽屉导航和侧边栏 |
| header.md | 配置标头 |
| safe-areas.md | 安全区域处理 |
问题 -> 技能映射
| 问题 | 从何处开始 |
|---|---|
| 在堆栈中显示屏幕和模态框 | stacks.md |
| 显示底部表单或表单页面 | form-sheet.md |
| 在底部标签页或响应式侧边栏中显示屏幕(支持 Web) | bottom-tabs.md |
| 在 iOS 和 Android 的原生标签页中显示屏幕 | native-bottom-tabs.md |
| 在可滑动的顶部标签页中显示内容 | material-top-tabs.md |
| 使用抽屉或侧边栏 | drawers.md |
| 配置底部标签页或抽屉导航器中的标头 | header.md |
| 处理安全区域,如状态栏、标头边距、标签栏边距等 | safe-areas.md |