@capgo/capacitor-Navigazione nativa

Chrome nativo

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

Rotte di proprietà web

Emitte gli eventi di intento dell'utente, quindi il tuo router esistente cambia il contenuto della WebView.

Icon serializzate

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

Transizione nativa shell

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

Zoom delle rotte

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

Demo

Shell nativa	context

Core API

• configure(options?) abilita l'host chrome nativo e controlla gli insetti del contenuto.
• setNavbar(options) aggiorna titolo, sottotitolo, pulsante indietro, pulsanti, colori, trasparenza e visibilità.
• setTabbar(options) aggiorna schede, scheda selezionata, badge, etichetta, icona, colori e visibilità.
• beginTransition(options?) captura la WebView in uscita prima del cambio di route 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 marchio di versione dell'implementazione nativa.

Eventi

• navbarBack si attiva quando viene premuto l'invito di ritorno nativo.
• navbarItemTap si attiva quando viene premuto un pulsante di azione del navbar nativo.
• tabSelect si attiva quando si seleziona una scheda nativa.
• safeAreaChanged Rapporta cambiamenti nella barra nativa e nell'area di sicurezza.
• transitionStart e transitionEnd riferisce i confini di transizione nativa.

Modello di piattaforma

iOS utilizza UINavigationBar e UITabBariOS 26 e successive utilizzano il sistema per rendere il comportamento di vetro liquido; le versioni precedenti utilizzano fallback materiali traslucidi/nativi.

Android utilizza un toolbar AppCompat e una navigazione inferiore material con posizionamento orizzontale.

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.

Continua da @capgo/capacitor-native-navigation

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à-viva per la capacità nativa in Utilizzando @capgo/capacitor-attività-viva, @capgo/capacitor-attività-viva per il dettaglio di implementazione in @capgo/capacitor-attività-viva, Utilizzando @capgo/capacitor-lettore-video per la capacità nativa in Utilizzando @capgo/capacitor-lettore-video, e @capgo/capacitor-player-video per i dettagli di implementazione in @capgo/capacitor-video-player.