Saltare al contenuto

@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 nomi e dello stato della barra.

Chrome nativo

Draw the top navigation bar and bottom tab bar with platform UI instead of web components.

Rotte di proprietà web

Gli eventi di intento dell'utente vengono emessi, quindi il tuo router esistente modifica il contenuto della WebView.

Icon serializzate

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

Shell di transizione nativa

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

Rotte di zoom

Apri le route delle carte, griglia e dettagli dei media con geometria di zoom nativa a elementi condivisi.

Navegazione nativaFlusso di tap
Demo di navigazione nativa animata mostrante barra dei menu, schede e contenuto WebViewFlusso di selezione di tab animato per la navigazione nativa, con transizione di push e ritorno indietro nativo
  • configure(options?) abilita l'host del chrome nativo e controlla gli insetti del contenuto.
  • setNavbar(options) aggiorna titolo, sottotitolo, pulsante back, pulsanti, colori, trasparenza e visibilità.
  • setTabbar(options) aggiorna schede, scheda selezionata, badge, etichette, icone, colori e visibilità.
  • beginTransition(options?) captura lo WebView in uscita prima del cambiamento della rotta JavaScript.
  • finishTransition(options?) animazione dallo snapshot catturato al 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'elemento di ritorno nativo.
  • navbarItemTap fires when a native navbar action button is tapped.
  • tabSelect si attiva quando viene selezionata una scheda nativa.
  • safeAreaChanged riconosce cambiamenti nella barra nativa e negli inset di area sicura.
  • transitionStart e transitionEnd riferisce i confini delle transizioni native.

iOS utilizza UINavigationBar e UITabBarSul 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.

Android utilizza un toolbar AppCompat e una navigazione in basso con materiali con posizionamento edge-to-edge.

The plugin does not create one native WebView per route. Version 1 keeps a single Capacitor WebView for bridge stability and lets native own only the frame, bar visuals, tab selection chrome, safe-area reporting, and transition shell.

Se stai utilizzando @capgo/capacitor-Navigazione nativa per pianificare il comportamento dei media e dell'interfaccia nativa, connettilo con Utilizza @capgo/capacitor-native-navigation per la capacità nativa in Utilizzare @capgo/capacitor-navigazione-nativa, Utilizzare @capgo/capacitor-attività-vive per la capacità nativa in Utilizzare @capgo/capacitor-attività-vive, @capgo/capacitor-attività-vive per il dettaglio di implementazione in @capgo/capacitor-attività-vive, Utilizzare @capgo/capacitor-lettore-di-video per la capacità nativa in Utilizzare @capgo/capacitor-lettore-di-video, e @capgo/capacitor-lettore-di-video per il dettaglio di implementazione in @capgo/capacitor-lettore-di-video.