@capgo/capacitor-native-navigation

Chrome natif

Draw the top navigation bar and bottom tab bar with platform UI instead of web components.

Routes gérées par le web

Native émet des événements d'intention utilisateur, puis votre routeur existant modifie le contenu de la WebView.

Icônes sérialisées

Configurez les onglets et les boutons avec des descripteurs SVG, SF Symbol, image embarquée ou drawable Android.

Shell de transition native

Capturez la WebView, mettez à jour le contenu en JS, terminez par une animation native snapshot vers WebView.

Routes avec zoom

Ouvrez les routes card, grid et media-detail avec une géométrie de zoom native de type shared-element.

Démo

Shell natif	Flux de tap	Navbar multi-niveaux (iOS)	Barre de navigation multi-niveaux (Android)

Cœur API

• configure(options?) active l'hôte chrome natif et contrôle les insets de contenu.
• setNavbar(options) permet de modifier le titre, le sous-titre, le bouton retour, les boutons, les couleurs, la transparence, la visibilité et les lignes de segments multi-niveaux sous la barresegments).
• setTabbar(options) onglets de mises à jour, onglet sélectionné, badges, libellés, icônes, couleurs et visibilité.
• beginTransition(options?) capture le WebView sortant avant le changement de route JavaScript.
• finishTransition(options?) anime la transition depuis la capture instantanée vers le WebView en direct une fois le contenu de la route prêt.
• beginZoomTransition(target, options?) et finishZoomTransition(target?, options?) sont des helpers JavaScript pour les transitions de zoom à partir d’éléments ou de rectangles.
• getPluginVersion() renvoie le marqueur de version de l'implémentation native.

Événements

• navbarBack se déclenche lorsque le bouton retour natif est tapé.
• navbarItemTap fires when a native navbar action button is tapped.
• navbarSegmentSelect fires when an item in a navbar segment row is selected.
• tabSelect se déclenche lorsqu’un onglet natif est sélectionné.
• safeAreaChanged reports native bar and safe-area inset changes.
• transitionStart et transitionEnd signale les limites des transitions natives.

Modèle de plateforme

iOS utilise UINavigationBar et UITabBar. Sur iOS 26 et versions ultérieures, le plugin permet au système d’afficher le comportement Liquid Glass ; les versions antérieures utilisent des replis natifs translucides ou en matériau.

Sur Android, l’AppCompat toolbar et la navigation inférieure Material sont positionnés en edge-to-edge.

Le plugin ne crée pas une WebView native par route. La version 1 conserve une seule WebView Capacitor pour la stabilité du bridge et laisse au natif uniquement le cadre, l’aspect de la barre, la sélection d’onglet, le rapport de zone sûre et la coquille de transition.

Continuer depuis @capgo/capacitor-native-navigation

Si vous utilisez @capgo/capacitor-native-navigation pour planifier le comportement des médias et de l'interface natifs, connectez-l’à Utilisation de @capgo/capacitor-native-navigation pour la fonctionnalité native dans « Utiliser @capgo/capacitor-native-navigation », Utiliser @capgo/capacitor-live-activities pour la capacité native dans Utiliser @capgo/capacitor-live-activities @capgo/capacitor-live-activities pour le détail d'implémentation dans @capgo/capacitor-live-activities Utiliser @capgo/capacitor-video-player pour la capacité native dans Utiliser @capgo/capacitor-video-player, et @capgo/capacitor-video-player pour le détail d'implémentation dans @capgo/capacitor-video-player.