Saltare al contenuto
Capgo - Aggiornamenti in tempo reale per le app Capacitor Capgo

@capgo/capacitor-navigazione nativa

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

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.

Routi 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.

Icone 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 finisci con un'animazione di snapshot nativa a WebView.

Zoom delle rotte

Apre le rotte di tipo card, griglia e media-detail con geometria di zoom nativa a elementi condivisi.

Demo

Sottosezione intitolata “Demo”
Shell nativaFlusso di tap
Demo animato di navigazione nativa che mostra una shell di navigazione nativa animata con navbar, schede e contenuto di WebView.Demo animato di flusso di tap di navigazione nativa che mostra la selezione di schede, transizione di push e back nativo.

Core API

Sezione intitolata “Core API”
  • 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 route in JavaScript.
  • finishTransition(options?) animazione da snapshot catturato a WebView live dopo che il contenuto della route è 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.

Eventi

Sezione intitolata “Eventi”
  • navbarBack si attiva quando viene premuto l'invito al 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.

Modello di piattaforma

Sezione intitolata “Modello di piattaforma”

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 in basso con materiali con posizionamento edge-to-edge.

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

Continua da @capgo/capacitor-navigazione-nativa

Sezione intitolata “Continua da @capgo/capacitor-navigazione-nativa”

Se stai utilizzando @capgo/capacitor-navigazione-nativa per pianificare il comportamento di media e 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.