Passer au contenu
Capgo - Mises à jour en temps réel pour les applications Capacitor Capgo

@capgo/capacitor-navigation native

Rendre le chrome de navigation iOS et Android de manière native tout en gardant JavaScript en charge des routes, du contenu, des icônes, des étiquettes et de 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 Web.

Zoom des routes

Ouvrir les cartes, les grilles et les médias détaillés avec une géométrie de zoom native partagée.

Demo

Section intitulée « Demo »
Shell natifFlux de clic
Démonstration animée de navigation native avec un shell de navigation natif animé, montrant un navbar natif, des onglets et un contenu de vue Web.Démonstration animée de flux de clic de navigation native montrant la sélection de tab, la transition de push et le bouton de retour natif

Noyau API

Section intitulée « Core 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 depuis le 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 natif est tapée.
  • navbarItemTap se déclenche lorsque l'on appuie sur un bouton d'action de la barre de navigation native.
  • tabSelect se déclenche lorsque l'on sélectionne une vignette native.
  • safeAreaChanged signale les changements des espaces de barre et de la zone de sécurité native.
  • transitionStart et transitionEnd signale les limites de transition native.

Modèle de plateforme

Section intitulée « Modèle de plateforme »

iOS utilise UINavigationBar et UITabBar. Sur iOS 26 et ultérieur, le plugin permet au système de rendre le comportement de la glace liquide ; les versions plus anciennes utilisent des fallbacks translucides/matériels natifs.

Android utilise un outil de compatibilité d'application et une navigation en bas matérielle avec un placement bord à bord.

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à à @capgo/capacitor-navigation-native

Section intitulée « Continuez de là à @capgo/capacitor-navigation-native »

Si vous utilisez @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigation-native @capgo/capacitor-navigation-native Pour planifier la média et le comportement d'interface native, connectez-l’avec @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigation-native Utilisez @capgo/capacitor-navigation-native pour la capacité native dans Utilisez @capgo/capacitor-navigation-native Utilisez @capgo/capacitor-activités-en-vivre pour la capacité native dans Utilisez @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 Utilisez @capgo/capacitor-joueur-de-videos 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.