React Navigation
Overview
Guide pour construire des interfaces de navigation avec React Navigation.
Cette skill s'applique uniquement à React Navigation 7. L'API et les patterns peuvent ne pas fonctionner avec d'autres versions.
API Selection
React Navigation propose deux API - Static API basée sur les objets et Dynamic API basée sur les composants.
- Applications Existantes: Vérifiez la configuration de navigation actuelle et suivez le même style d'API lors de l'utilisation des références
- Nouvelles Applications: Si l'application n'a pas encore de configuration de navigation existante, préférez
Static API
When to Apply
Référencez cette skill quand :
- Vous construisez des patterns d'UI de navigation tels que stacks, tabs, drawers, sheets etc.
- Vous configurez des headers et autres UI de navigator intégrées
- Vous gérez les safe areas et insets dans l'UI de navigation
References
| File | Description |
|---|---|
| stacks.md | Stack based navigation |
| form-sheet.md | Bottom sheet and form sheets |
| bottom-tabs.md | Cross-platform bottom tabs |
| native-bottom-tabs.md | Native bottom tabs |
| material-top-tabs.md | Swipeable Top tabs |
| drawers.md | Drawer navigation and sidebars |
| header.md | Configuring headers |
| safe-areas.md | Safe-area handling |
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 |