Saltare al contenuto

@capgo/capacitor-navigazione nativa

Rendere nativamente la barra di navigazione per iOS e Android mentre JavaScript mantiene il controllo delle rotte, del contenuto, degli iconi, dei titoli e dello stato della barra.

Chrome nativo

Disegna la barra di navigazione superiore e la barra dei pulsanti inferiori con l'interfaccia utente della piattaforma al posto dei componenti web.

Rotte di proprietà web

La navigazione nativa emette eventi di intento dell'utente, quindi il tuo router esistente cambia il contenuto della finestra di visualizzazione web.

Icône serializzate

Configura le schede e i pulsanti con SVG, SF Symbol, immagini integrate o descriptor di disegno Android.

Shell di transizione nativa

Cattura la WebView corrente, aggiorna il contenuto in JavaScript, quindi conclude con un'animazione di snapshot nativa a WebView.

Zoom delle rotte

Apri le rotte di carta, griglia e dettagli media con geometria di zoom nativa a elementi condivisi.

Shell nativaFlusso di tap
Demo animata di navigazione nativa che mostra una shell di navigazione nativa animata, una barra di navigazione nativa, schede e contenuto di WebViewFlusso di tap animato di navigazione nativa che mostra la selezione della scheda, la transizione di push e il back nativo
  • configure(options?) abilita l'host chrome nativo e controlla gli spazi di contenuto.
  • setNavbar(options) aggiorna titolo, sottotitolo, pulsante indietro, pulsanti, colori, trasparenza e visibilità.
  • setTabbar(options) aggiorna schede, scheda selezionata, badge, etichette, icone, colori e visibilità.
  • beginTransition(options?) captura la WebView in uscita prima del cambio di rotta JavaScript.
  • finishTransition(options?) animazione da snapshot catturato a WebView live dopo che il contenuto della rotta è pronto.
  • beginZoomTransition(target, options?) e finishZoomTransition(target?, options?) sono aiuti JavaScript per le transizioni di zoom da elementi o rettangoli.
  • getPluginVersion() restituisce il marker di versione dell'implementazione nativa.
  • navbarBack si attiva quando viene premuto l'invito di ritorno nativo.
  • navbarItemTap si attiva quando viene premuto un pulsante di azione della barra di navigazione nativa.
  • tabSelect si attiva quando viene selezionata una scheda nativa.
  • safeAreaChanged rappresenta i cambiamenti degli insetti della barra nativa e della zona sicura.
  • transitionStart e transitionEnd rappresenta i confini delle transizioni native.

iOS utilizza UINavigationBar e UITabBarsu iOS 26 e successive, il plugin consente al sistema di rendere il comportamento di vetro liquido; le versioni più vecchie utilizzano fallback materiali trasparenti/nativi.

Android utilizza un toolbar AppCompat e una navigazione inferiore Material con posizionamento edge-to-edge.

Il plugin non crea un WebView nativo per ogni route. La versione 1 mantiene un solo WebView Capacitor per stabilità del ponte e lascia che la piattaforma possieda solo il frame, le visualizzazioni della barra, la selezione delle schede, la zona sicura e la shell delle transizioni.

Se stai utilizzando @capgo/capacitor-navigazione-nativa per pianificare il comportamento dei media e dell'interfaccia nativa, collega Utilizzando @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzando @capgo/capacitor-navigazione-nativa Utilizzando @capgo/capacitor-attività-vive per la capacità nativa in Utilizzando @capgo/capacitor-attività-vive @capgo/capacitor-attività-vive per il dettaglio di implementazione in @capgo/capacitor-attività-vive Utilizzando @capgo/capacitor-lettore-video per la capacità nativa in Utilizzare @capgo/capacitor-video-player, e @capgo/capacitor-video-player per il dettaglio di implementazione in @capgo/capacitor-video-player.