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 的指南。
此 skill 仅适用于 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
在以下情况下参考此 skill：
- 构建 Stack、Tab、Drawer、Sheet 等导航 UI 模式
- 配置 Header 和其他内置 navigator UI
- 处理导航 UI 中的安全区域和 insets
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] | 基于 Stack 的导航 |
| [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] | Drawer 导航和侧边栏 |
| [header.md][header] | 配置 Header |
| [safe-areas.md][safe-areas] | 安全区域处理 |
Problem -> Skill Mapping
问题 -> Skill 映射
| 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 |
| 问题 | 建议从以下资料开始 |
|---|---|
| 在 Stack 中显示屏幕和模态框 | stacks.md |
| 显示底部弹层或表单弹层 | form-sheet.md |
| 在底部标签页中显示屏幕，或显示支持 Web 的响应式侧边栏 | bottom-tabs.md |
| 在 iOS 和 Android 上使用原生标签页显示屏幕 | native-bottom-tabs.md |
| 在可滑动顶部标签页中显示内容 | material-top-tabs.md |
| 使用 Drawer 或侧边栏 | drawers.md |
| 配置底部标签页或 Drawer navigator 的 Header | header.md |
| 处理状态栏、Header insets、标签栏 insets 等安全区域 | safe-areas.md |