Saltare alla navigazione
Capgo - Aggiornamenti in tempo reale per le app Capacitor Capgo

@capgo/capacitor-navigazione nativa

Rendere la navigazione di iOS e Android nativamente 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 inferiore con l'interfaccia utente del dispositivo al posto dei componenti web.

Routi di proprietà web

Il nativo emette eventi di intento dell'utente, quindi il tuo router esistente modifica il contenuto della finestra di visualizzazione web.

Icon serializzate

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

Shell di transizione nativa

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

Routi di zoom

Apri le route di card, griglia e media-detail con geometria di zoom a elementi condivisi stile nativo.

Demo

Sezione intitolata “Demo”
Shell nativaTappare il flusso
Demo di shell di navigazione nativa animata che mostra il navbar, le schede e il contenuto WebViewDemo di flusso di navigazione nativa animata che mostra la selezione della scheda, la transizione di spinta e il back nativo

Core API

Sezione intitolata “Core API”
  • configure(options?) abilita l'host del chrome nativo e controlla gli insetti di contenuto.
  • setNavbar(options) aggiorna il titolo, la sottotitolo, il pulsante di ritorno, i pulsanti, i colori, la trasparenza e la visibilità.
  • setTabbar(options) aggiorna le schede, la scheda selezionata, le badge, le etichette, gli icona, i colori e la visibilità.
  • beginTransition(options?) captura il WebView in uscita prima del cambio di rotta JavaScript.
  • finishTransition(options?) animazione da snapshot catturato al WebView live dopo che il contenuto della rotta è pronto.
  • beginZoomTransition(target, options?) e sono aiuti JavaScript per le transizioni di zoom da elementi o rettangoli. finishZoomTransition(target?, options?) resta la versione di riferimento dell'implementazione nativa.
  • getPluginVersion() Eventi

Sezione intitolata “Eventi”

si attiva quando viene premuto l'elemento di retrocessione nativa.
  • navbarBack si attiva quando viene premuto un pulsante di azione di navigazione nativa.
  • navbarItemTap si attiva quando viene selezionata una scheda nativa.
  • tabSelect riferisce i cambiamenti degli insetti di barra e area di sicurezza nativi.
  • safeAreaChanged e
  • transitionStart riferisce i confini delle transizioni native. transitionEnd Modello di piattaforma

e sono aiuti JavaScript per le transizioni di zoom da elementi o rettangoli.

Sezione intitolata “Modello di piattaforma”

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

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

Il 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, le barre visive, la selezione del tab, la segnalazione dell'area sicura e la shell di transizione.

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 dei media e dell'interfaccia nativa, connettilo con Utilizza @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzare @capgo/capacitor-native-navigation, Utilizzare @capgo/capacitor-live-activities per la capacità nativa in Utilizzare @capgo/capacitor-live-activities, @capgo/capacitor-live-activities per il dettaglio di implementazione in @capgo/capacitor-live-activities, Utilizzare @capgo/capacitor-video-player 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.