Aller directement au contenu

@capgo/capacitor-navigation-native

Afficher le chrome de 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.

Navigateur natif

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

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 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 par une animation de capture native vers la vue.

Routes de zoom

Ouvrez les routes de carte, grille et détails multimédia avec une géométrie de zoom natif à éléments partagés.

Shell natifTap flow
Démo de shell de navigation native animée montrant un navbar, des onglets et un contenu WebView natifNavigation de tab animée montrant la sélection de tab, la transition de push et le retour natif
  • configure(options?) active le hôte chrome natif et contrôle les marges de contenu.
  • setNavbar(options) active le hôte de chrome natif et contrôle les marges de contenu.
  • setTabbar(options) Mises à jour de onglets, onglet sélectionné, étiquettes, badges, icônes, couleurs et visibilité.
  • beginTransition(options?) capture la WebView en sortie avant le changement de route JavaScript.
  • finishTransition(options?) capturera la WebView sortante avant le changement de route JavaScript.
  • 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 le marqueur de version de l'implémentation native.
  • navbarBack se déclenche lorsque l'affordance de retour native est tapée.
  • navbarItemTap fires when a native navbar action button is tapped.
  • tabSelect Déclenché lorsqu'une onglet natif est sélectionné.
  • safeAreaChanged signale les changements des barres et des aires de sécurité.
  • transitionStart et transitionEnd signale les limites des transitions natives.

iOS utilise UINavigationBar et UITabBarSur iOS 26 et plus récent, le plugin laisse le système rendre le comportement de verre liquide ; les versions plus anciennes utilisent des fallbacks translucides/matériels natifs.

Android utilise un barre d'outils AppCompat et une navigation basse 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-native-navigation

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

Si vous utilisez @capgo/capacitor-navigation native pour planifier le comportement de médias et d'interface natifs, connectez-l’avec En utilisant @capgo/capacitor-native-navigation pour la capacité native dans l'utilisation de @capgo/capacitor-native-navigation, en utilisant @capgo/capacitor-live-activités pour la capacité native dans l'utilisation de @capgo/capacitor-live-activités, @capgo/capacitor-live-activités pour le détail d'implémentation dans @capgo/capacitor-live-activités, en utilisant @capgo/capacitor-video-joueur pour la capacité native dans l'utilisation de @capgo/capacitor-video-joueur, et @capgo/capacitor-video-joueur pour le détail d'implémentation dans @capgo/capacitor-video-joueur.