react-navigation
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseReact Navigation
React Navigation
Overview
概述
Guide for building navigation UIs with React Navigation.
This skill only applies to React Navigation 7. The API and patterns may not work with different versions.
使用React Navigation构建导航UI的指南。
本技能仅适用于React Navigation 7。相关API和模式可能无法在其他版本中正常工作。
API Selection
API选择
React Navigation offers two API - object-based and component-based .
Static APIDynamic API- Existing Apps: Check the current navigation setup and follow the same API style when using the references
- New Apps: If the app does not have an existing navigation setup yet, prefer
Static API
React Navigation提供两种API——基于对象的和基于组件的。
Static APIDynamic API- 现有应用：检查当前的导航设置，使用参考内容时遵循相同的API风格
- 新应用：如果应用尚未配置导航设置，优先选择
Static API
When to Apply
适用场景
Reference this skill when:
- Building navigation UI patterns such as stacks, tabs, drawers, sheets etc.
- Configuring headers and other built-in navigator UI
- Handling safe areas and insets in navigation UI
在以下场景中参考本技能：
- 构建栈、标签栏、抽屉、表单栏等导航UI模式
- 配置标题栏及其他内置导航器UI
- 在导航UI中处理安全区域与内边距
References
参考资料
| File | Description |
|---|---|
| [stacks.md][stacks] | Stack based navigation |
| [form-sheet.md][form-sheet] | Bottom sheet and form sheets |
| [bottom-tabs.md][bottom-tabs] | Cross-platform bottom tabs |
| [native-bottom-tabs.md][native-bottom-tabs] | Native bottom tabs |
| [material-top-tabs.md][material-top-tabs] | Swipeable Top tabs |
| [drawers.md][drawers] | Drawer navigation and sidebars |
| [header.md][header] | Configuring headers |
| [safe-areas.md][safe-areas] | Safe-area handling |
| 文件路径 | 描述 |
|---|---|
| [stacks.md][stacks] | 基于栈的导航 |
| [form-sheet.md][form-sheet] | 底部表单栏与表单弹窗 |
| [bottom-tabs.md][bottom-tabs] | 跨平台底部标签栏 |
| [native-bottom-tabs.md][native-bottom-tabs] | 原生底部标签栏 |
| [material-top-tabs.md][material-top-tabs] | 可滑动顶部标签栏 |
| [drawers.md][drawers] | 抽屉导航与侧边栏 |
| [header.md][header] | 标题栏配置 |
| [safe-areas.md][safe-areas] | 安全区域处理 |
Problem -> Skill Mapping
问题->技能映射
| Problem | Start With |
|---|---|
| Showing screens and modals in a stack | stacks.md |
| Showing bottom sheets or form sheets | form-sheet.md |
| Showing screens in bottom tabs or responsive sidebars with web support | bottom-tabs.md |
| Showing screens in native tabs on iOS & Android | native-bottom-tabs.md |
| Showing content in swipeable top tabs | material-top-tabs.md |
| Using a drawer or sidebar | drawers.md |
| Configuring the header in bottom tab or drawer navigator | header.md |
| Handling safe-area such as status bar, header insets, tab bar insets etc. | 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 |