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.

Iconografie 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 a WebView nativa.

Zoom delle rotte

Apre le rotte di scheda, griglia e dettagli dei media con geometria di zoom di elementi condivisi di stile nativo.

Shell nativaFlusso di tap
Demo animato di navigazione nativa che mostra una barra di navigazione nativa, schede e contenuto di WebView.Demo animato di flusso di tap di navigazione nativa che mostra la selezione di scheda, transizione di push e back nativo.
  • configure(options?) abilita l'host del 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 dalla snapshot catturata alla 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 marchio 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.

L'iOS utilizza UINavigationBar e UITabBar. Sull'iOS 26 e successive versioni, il plugin consente al sistema di rendere il comportamento di vetro liquido; le versioni precedenti utilizzano fallback materiali traslucidi/nativi.

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

La plugin non crea un WebView nativo per rotta. La versione 1 mantiene un singolo WebView Capacitor per stabilità del ponte e lascia che il nativo possieda solo il frame, la barra visiva, la selezione della scheda, la zona sicura e la shell di transizione.

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 Utilizzo di @capgo/capacitor-video-player, e @capgo/capacitor-video-player per il dettaglio di implementazione in @capgo/capacitor-video-player.