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

@capgo/capacitor-navigation native

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

Native chrome

Dessinez la barre de navigation supérieure et la barre de boutons inférieure avec 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 des SVG, des SF Symbol, des images embarquées ou des décripteurs de dessinateurs Android.

Shell de transition native

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

Zoom des routes

Ouvrir les routes de carte, grille et détails de médias avec une géométrie de zoom natif à l'élément partagé.

Démonstration

Sous-titre “Démonstration”
Shell natifTaper la flèche
Démonstration animée de shell de navigation natif montrant le contenu de la barre de navigation, les onglets et le contenu de WebView.Démonstration animée de flux de navigation natif montrant la sélection de l'onglet, la transition de poussée et le retour natif.

API

Sous-titre “API”
  • configure(options?) active le hôte de la barre de navigation native et contrôle les marges de contenu.
  • setNavbar(options) Mise à jour du titre, du sous-titre, du bouton Retour, des boutons, des couleurs, de la transparence et de la visibilité.
  • setTabbar(options) Mise à jour des onglets, de l'onglet sélectionné, des badges, des étiquettes, des icônes, des couleurs et de la visibilité.
  • beginTransition(options?) Capturer la WebView en sortie avant le changement de route JavaScript.
  • finishTransition(options?) Animer à partir du snapshot capturé vers la 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 marqueur de version de l'implémentation native.

Événements

Sous-section intitulée « Événements »
  • navbarBack Fait feu de tout bois lorsque l'affordance de retour native est tapotée.
  • navbarItemTap Fait feu de tout bois lorsque le bouton d'action de la barre de navigation native est tapoté.
  • tabSelect Fait feu de tout bois lorsque l'onglet native est sélectionné.
  • safeAreaChanged rapporte les changements des barres et des espaces de sécurité native.
  • transitionStart et transitionEnd rapporte les limites de transition native.

Modèle de plateforme

Sous-section intitulée “Modèle de plateforme”

L'iOS utilise UINavigationBar et UITabBar. Sur 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 natives.

L'Android utilise un menu d'application AppCompat et une navigation en bas matérielle avec un placement bord à bord.

Le plugin ne crée pas une fenêtre WebView native par route. La version 1 garde une seule Capacitor fenêtre WebView pour la stabilité de la passerelle et laisse la propriété native uniquement de la bordure, des visuels de barre, de la sélection de la barre d'onglets, de la sécurité de l'espace et de la coquille de transition.

Continuez à partir de @capgo/capacitor-navigation native

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

If vous utilisez __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation pour planifier le comportement de médias et d'interface natifs, connectez-le avec __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation pour la capacité native dans capgo/capacitor-native-navigation __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation pour la capacité native dans __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation capgo/capacitor-live-activities pour la capacité native dans capgo/capacitor-live-activities capgo/capacitor-live-activities capgo/capacitor-live-activities pour le détail d'implémentation dans capgo/capacitor-live-activities capgo/capacitor-video-player pour la capacité native dans capgo/capacitor-video-player, et capgo/capacitor-video-player If vous utilisez capgo/capacitor-native-navigation pour planifier le comportement de médias et d'interface natifs, connectez-le avec capgo/capacitor-native-navigation pour la capacité native dans capgo/capacitor-native-navigation capgo/capacitor-native-navigation pour la capacité native dans capgo/capacitor-native-navigation capgo/capacitor-live-activities pour la capacité native dans capgo/capacitor-live-activities pour les détails d'implémentation dans @capgo/capacitor-player vidéo.