Sauter au contenu
Capgo - Live Updates for Capacitor Apps Capgo

@capgo/capacitor-navigation native

Rendre le chrome de navigation iOS et Android de manière native tout en laissant JavaScript contrôler les routes, le contenu, les icônes, les étiquettes et l'état de la barre.
Commencer GitHub

Native chrome

Dessinez la barre de navigation supérieure et la barre de boutons inférieure avec l'interface utilisateur de la plateforme au lieu de composants web.

Routes détenues par le web

La navigation native émet des événements d'intention de l'utilisateur, puis votre routeur existant change le contenu de la vue WebView.

Icônes sérialisées

Configurez les onglets et les boutons avec des icônes SVG, SF Symbol, des images embarquées ou des déscripteurs Android drawable.

Shell de transition native

Capturer la vue actuelle, mettre à jour le contenu en JavaScript, puis terminer avec une animation de snapshot natif vers la vue.

Zoom des routes

Ouvrir les routes de carte, de grille et de détails de médias avec une géométrie de zoom native partagée.

Démonstration

Sous-titre « Démonstration »
Shell natifFlux de clic
Démonstration animée de navigation native montrant un navbar natif, des onglets et un contenu de WebView.Démonstration animée de flux de clic de navigation native montrant la sélection d'onglet, la transition de push et le bouton arrière natif.

Composant de base API

Section intitulée “Noyau API”
  • configure(options?) active le hôte de chrome natif et contrôle les marges de contenu.
  • setNavbar(options) met à jour le titre, le sous-titre, le bouton Retour, les boutons, les couleurs, la transparence et la visibilité.
  • setTabbar(options) met à jour les onglets, l'onglet sélectionné, les badges, les étiquettes, les icônes, les couleurs et la visibilité.
  • beginTransition(options?) capturera la vue WebView en sortie avant le changement de route JavaScript.
  • finishTransition(options?) anime à partir du snapshot capturé vers la vue WebView en direct après que le contenu de la route soit prêt.
  • beginZoomTransition(target, options?) et finishZoomTransition(target?, options?) sont des aides JavaScript pour les transitions de zoom à partir d'éléments ou de rectangles.
  • getPluginVersion() renvoie la marque de version de l'implémentation native.

Événements

Section intitulée “Événements”
  • navbarBack se déclenche lorsque l'affordance de retour native est tapée.
  • navbarItemTap se déclenche lorsqu'un bouton d'action de la barre de navigation native est cliqué.
  • tabSelect se déclenche lorsqu'une case de navigation native est sélectionnée.
  • safeAreaChanged signale les changements des barres et des aires de sécurité.
  • transitionStart et transitionEnd signale les limites de transition native.

Modèle de plateforme

Section intitulée « Modèle de plateforme »

iOS utilise UINavigationBar et UITabBariOS 26 et ultérieur utilise le système pour afficher le comportement de verre liquide ; les versions plus anciennes utilisent des fallbacks translucides/matériels natives.

Android utilise un outil de navigation AppCompat et une navigation en bas avec un placement à l'écran édgel-to-edge.

The plugin does not create one native WebView per route. Version 1 keeps a single Capacitor WebView for bridge stability and lets native own only the frame, bar visuals, tab selection chrome, safe-area reporting, and transition shell.

Continuez de là à partir de @capgo/capacitor-navigation-native

Section intitulée “Continuez de là à partir de @capgo/capacitor-navigation-native”

Si vous utilisez @capgo/capacitor-navigation-native pour planifier le comportement de médias et d'interface natives, connectez-l’à En utilisant @capgo/capacitor-navigation-native pour la capacité native dans En utilisant @capgo/capacitor-navigation-native, En utilisant @capgo/capacitor-activités-en-vivre pour la capacité native dans En utilisant @capgo/capacitor-activités-en-vivre, @capgo/capacitor-activités-en-vivre pour le détail d'implémentation dans @capgo/capacitor-activités-en-vivre, En utilisant @capgo/capacitor-jouer-un-vide pour la capacité native dans L'utilisation de @capgo/capacitor-video-player, et @capgo/capacitor-video-player pour le détail d'implémentation dans @capgo/capacitor-video-player.