Zum Inhalt springen
Capgo - Live Updates für Capacitor-Apps Capgo

@capgo/capacitor-native-navigation

iOS- und Android-Navigationschrome renderen Sie nativ, während JavaScript Routen, Inhalte, Icons, Beschriftungen und Status der Leiste behält.
Loslegen GitHub

Natives Leiste

Zeichnen Sie die oberste Navigationsleiste und die untere Tab-Leiste mit Plattform-UI anstatt mit Web-Komponenten.

Web-besitzene Routen

Natives sendet Ereignisse für Benutzerabsicht, dann ändert Ihr bestehender Router den WebView-Inhalt.

Serialisierte Icons

Konfigurieren Sie Tabs und Schaltflächen mit SVG, SF Symbol, eingebetteter Bilddatei oder Android-Drawable-Deskriptoren.

Natives Übergangsschale

Fangen Sie den aktuellen WebView ein, aktualisieren Sie den Inhalt in JavaScript und beenden Sie mit einer nativen Snapshot-to-WebView-Animation.

Zoom-Routen

Karten-, Grid- und media-detail-Routen mit gemeinsamer-Element-Style-Native-Zoom-Geometrie öffnen.

Demo

Abschnitt mit dem Titel „Demo“
Native ShellTap-Flow
Animierte native Navigation-Shell-Demo, die native Navbar, Tabs und WebView-Inhalt anzeigtAnimierte native Navigation-Tap-Flow, der die Auswahl von Tabs, Push-Übergang und native Back anzeigt

Core API

Abschnitt mit dem Titel „Core API“
  • configure(options?) ermöglicht die native Chrome-Host-Verwaltung und steuert die Inhalte-Einrückungen.
  • setNavbar(options) aktualisiert native Titel, Untertitel, Rück-Button, Buttons, Farben, Transparenz und Sichtbarkeit.
  • setTabbar(options) aktualisiert Tabs, ausgewählter Tab, Badges, Labels, Icons, Farben und Sichtbarkeit.
  • beginTransition(options?) fängt die ausgehende WebView vor dem JavaScript Routenwechsel ein.
  • finishTransition(options?) animiert von dem aufgenommenen Snapshot zur lebenden WebView nachdem die Routeninhalt bereit ist.
  • beginZoomTransition(target, options?) und finishZoomTransition(target?, options?) sind JavaScript-Hilfsmittel für Zoom-Übergänge von Elementen oder Rechtecken.
  • getPluginVersion() gibt die Versionsmarke der nativen Implementierung zurück.

Ereignisse

Abschnitt mit dem Titel “Ereignisse”
  • navbarBack wird ausgelöst wenn die native Zurück-Verfügbarkeit angeklickt wird.
  • navbarItemTap wird ausgelöst wenn eine native Navbar-Aktionstaste angeklickt wird.
  • tabSelect wird ausgelöst wenn eine native Tab-Seite ausgewählt wird.
  • safeAreaChanged berichtet über native Bar- und Safe-Area-Einsetzungen.
  • transitionStart und transitionEnd berichten Sie native Übergangsgrenzen.

Plattformmodell

Abschnitt mit dem Titel „Plattformmodell“

iOS verwendet UINavigationBar und UITabBar. Bei iOS 26 und neuer lässt das Plugin das System Liquid Glass-Verhalten rendern; ältere Versionen verwenden native durchsichtige/Material-Abfälle.

Android verwendet einen AppCompat-Toolbar und eine Material-Unterseite-Navigation mit Rand-zu-Rand-Anordnung.

Das Plugin erstellt keine einzelne native WebView pro Route. Version 1 hält ein einzelnes Capacitor WebView für Brückengeschwindigkeit und lässt native nur den Rahmen, die Bar-Visualisierung, die Tab-Selektionsleiste, die sichere Bereichsberichterstattung und die Übergangshülle besitzen.

Fortsetzen von @capgo/capacitor-native-Navigation

Abschnitt mit dem Titel „Fortsetzen von @capgo/capacitor-native-Navigation“

Wenn Sie @capgo/capacitor-native-Navigation um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Mit @capgo/capacitor-native-navigation für die native Fähigkeit in Mit @capgo/capacitor-native-navigation, Mit @capgo/capacitor-live-activities für die native Fähigkeit in Mit @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities, Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player, und @capgo/capacitor-video-player für die Implementierungsdetails in @capgo/capacitor-video-player.