Passer au contenu

@capgo/capacitor-navigation-native

Affichez l'interface 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

Créez la barre de navigation supérieure et la barre de tab inférieure avec l'UI de la plateforme au lieu de composants web.

Routes détenues par le web

Native emits user intent events, then your existing router changes the WebView content.

Icônes sérialisées

Configurez les onglets et les boutons avec des icônes SVG, SF Symbol, des images intégré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'élément partagé.

Boîte de dialogue nativeFlux de clic
Démonstration animée de la boîte de dialogue native de navigationNavigation native animée montrant le flux de sélection de la touche, 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) met à jour le titre, le sous-titre, le bouton de retour, les boutons, les couleurs, la transparence et la visibilité.
  • setTabbar(options) Mises à jour de onglets, onglet sélectionné, étiquettes, icônes, couleurs et visibilité.
  • beginTransition(options?) captures la vue WebView sortante avant le changement de route JavaScript.
  • finishTransition(options?) animate depuis la capture de l'écran vers la vue WebView après que le contenu de la route soit prêt.
  • beginZoomTransition(target, options?) et finishZoomTransition(target?, options?) Les 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.
  • navbarBack s'active lorsque l'affordance de retour native est tapée.
  • navbarItemTap s'active lorsque bouton d'action de la barre de navigation native est tapé.
  • tabSelect Déclenché lorsqu'une vignette native est sélectionnée.
  • safeAreaChanged signale les changements dans les barres et les aires de sécurité.
  • transitionStart et transitionEnd signale les limites des transitions natives.

iOS utilise UINavigationBar et UITabBarSur iOS 26 et versions ultérieures, le plugin laisse le système rendre le comportement Liquid Glass ; les versions plus anciennes utilisent des fallbacks translucides/matériels natifs.

L'Android utilise un barre d'outils AppCompat et une navigation basse matérielle avec un placement bord-à-bord.

Le plugin ne crée pas une WebView native par route. La version 1 conserve une seule WebView Capacitor pour la stabilité de la passerelle et laisse la native gérer uniquement la fenêtre, la barre de navigation, le choix de la page, la sécurité de l'aire et le shell de transition.

Si vous utilisez @capgo/capacitor-native-navigation pour planifier le comportement de médias et d'interface natives, connectez-l’avec En utilisant @capgo/capacitor-native-navigation pour la capacité native dans l'utilisation de @capgo/capacitor-native-navigation l'utilisation de @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 l'utilisation de @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