Vai al contenuto
Capgo - Build, rilascia e aggiorna app Capacitor Capgo

@capgo/capacitor-native-navigation

Renderizza nativamente l'interfaccia di navigazione di iOS e Android, mentre JavaScript continua a gestire rotte, contenuti, icone, label e stato della barra.
Inizia ora GitHub

Chrome nativo

Disegna la barra di navigazione superiore e la barra delle tab inferiore con l'UI della piattaforma anziché con componenti web.

Route gestite dal web

Native emette eventi di intento utente, quindi il tuo router esistente modifica il contenuto del WebView.

Icone serializzate

Configura tab e pulsanti con SVG, SF Symbol, immagini bundle o descrittori drawable Android.

Shell di transizione nativa

Cattura il WebView corrente, aggiorna il contenuto in JavaScript, poi completa con un'animazione nativa da snapshot a WebView.

Route con zoom

Apri le rotte card, grid e media-detail con zoom nativo in stile shared-element.

Demo

Sezione intitolata “Demo”
Shell nativaFlusso di tapNavbar multilivello (iOS)Navbar multilivello (Android)
Demo animata della shell di navigazione nativa che mostra navbar nativa, tab e contenuto WebViewFlusso animato di tap sulla navigazione nativa che mostra selezione tab, transizione push e back nativoRegistrazione iOS delle righe segmentate della navbar multilivello: un selettore Account / Organization sopra una riga di chip di sezioneRegistrazione Android delle righe segmentate della navbar multilivello: un selettore Account / Organization sopra una riga di chip di sezione

Il core API

Sezione intitolata “Core API”
  • configure(options?) abilita l'host nativo e controlla gli inset del contenuto.
  • setNavbar(options) aggiorna titolo nativo, sottotitolo, pulsante back, pulsanti, colori, trasparenza, visibilità e righe segmentate multilivello sotto la barra (segments).
  • setTabbar(options) aggiorna tab, tab selezionata, badge, etichette, icone, colori e visibilità.
  • beginTransition(options?) cattura la WebView in uscita prima del cambio di rotta JavaScript.
  • finishTransition(options?) anima dalla snapshot catturata alla WebView live dopo che il contenuto della rotta è pronto.
  • beginZoomTransition(target, options?) e finishZoomTransition(target?, options?) sono helper JavaScript per le transizioni di zoom da elementi o rettangoli.
  • getPluginVersion() restituisce il marker della versione dell'implementazione nativa.

Eventi

Sezione intitolata “Events”
  • navbarBack fires when the native back affordance is tapped.
  • navbarItemTap si attiva quando viene toccato un pulsante di azione nella navbar nativa.
  • navbarSegmentSelect fires when an item in a navbar segment row is selected.
  • tabSelect si attiva quando viene selezionata una tab nativa.
  • safeAreaChanged segnala le modifiche alla barra nativa e agli inset delle safe-area.
  • transitionStart e transitionEnd segnala i confini delle transizioni native.

Modello della piattaforma

Sezione intitolata “Modello della piattaforma”

iOS utilizza UINavigationBar e UITabBarSu iOS 26 e versioni successive, il plugin permette al sistema di renderizzare l'effetto Liquid Glass; le versioni precedenti utilizzano i fallback nativi translucent/material.

Android utilizza una toolbar AppCompat e una Material bottom navigation con posizionamento edge-to-edge.

Il plugin non crea una WebView nativa per ogni route. La versione 1 mantiene un'unica WebView Capacitor per la stabilità del bridge e lascia al nativo solo il frame, gli elementi visivi della barra, la chrome di selezione dei tab, il reporting della safe area e la shell delle transizioni.

Continua da @capgo/capacitor-native-navigation

Sezione intitolata “Continua da @capgo/capacitor-native-navigation”

Se stai usando @capgo/capacitor-native-navigation per pianificare il comportamento dei media nativi e dell'interfaccia, collegalo a Usando @capgo/capacitor-native-navigation per la funzionalità nativa in Using @capgo/capacitor-native-navigation, Uso di @capgo/capacitor-live-activities per la funzionalità nativa nella pagina Uso di @capgo/capacitor-live-activities, @capgo/capacitor-live-activities per il dettaglio implementativo in @capgo/capacitor-live-activities, Uso di @capgo/capacitor-video-player per la funzionalità nativa nella pagina Uso di @capgo/capacitor-video-player, e @capgo/capacitor-video-player per il dettaglio implementativo in @capgo/capacitor-video-player.