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

@capgo/capacitor-native-navigation

Rendre la navigation iOS et Android nativement tout en laissant JavaScript contrôler les routes, le contenu, les icônes, les étiquettes et l'état de la barre.
Commencez GitHub

Native chrome

Dessinez la barre de navigation supérieure et la barre de boutons inférieure à l'aide de l'UI de la plateforme au lieu de composants web.

Routes détenues par le web

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

Icônes sérialisées

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

Shell de transition native

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

Routes de zoom

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

Démonstration

Sous-section intitulée « Démonstration »
Shell natifFlux de tap
Démonstration animée de shell de navigation native montrant un navbar, des onglets et un contenu WebView natifDémonstration animée de flux de tap de navigation native montrant la sélection d'onglets, la transition de push et le bouton de retour natif

API est au cœur

Sous-section intitulée « API est au cœur »
  • 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 de retour, les boutons, les couleurs, la transparence et la visibilité natifs.
  • setTabbar(options) Mise à jour des onglets, onglet sélectionné, badges, étiquettes, icônes, couleurs et visibilité.
  • beginTransition(options?) Captures la WebView sortante avant le changement de route JavaScript.
  • finishTransition(options?) Anime à partir du snapshot capturé vers la WebView live 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 lorsque bouton d'action de la barre de navigation native est tapé.
  • tabSelect Se déclenche lorsque l'onglet native est sélectionné.
  • safeAreaChanged Rapporte les changements des barres et des aires de sécurité.
  • transitionStart et transitionEnd rapporte les limites de transition natives.

Modèle de plateforme

Section intitulée “Modèle de plateforme”

L'iOS utilise UINavigationBar et UITabBar. Sur iOS 26 et versions plus récentes, le plugin laisse le système rendre le comportement Liquid Glass ; les versions plus anciennes utilisent des fallbacks translucides/matériels natives.

L'Android utilise un barre d'outils AppCompat et une navigation en bas avec un placement à l'égard de l'arête.

Le plugin ne crée pas une WebView native par route. La version 1 garde une seule Capacitor WebView pour la stabilité de la passerelle et laisse les natives posséder uniquement la fenêtre, la barre de visuel, la sélection de la barre d'outils, le rapport de la zone de sécurité et la coquille de transition.

Continuez à partir de @capgo/capacitor-navigation native

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

Si vous utilisez @capgo/capacitor-navigation-native pour planifier le comportement de médias et d'interface natifs, connectez-le à En utilisant @capgo/capacitor-navigation-native pour la capacité native dans En utilisant @capgo/capacitor-navigation-native, En utilisant @capgo/capacitor-activités-vives pour la capacité native dans En utilisant @capgo/capacitor-activités-vives, @capgo/capacitor-activités-vives pour le détail d'implémentation dans @capgo/capacitor-activités-vives, En utilisant @capgo/capacitor-joueur-vision pour la capacité native dans En utilisant @capgo/capacitor-joueur-vision, et @capgo/capacitor-joueur-vision pour le détail d'implémentation dans @capgo/capacitor-joueur-vision.