@capgo/capacitor-native-Navigation

Fügen Sie iOS- und Android-Navigation chrome nativ hinzu, während JavaScript die Routen, Inhalte, Icons, Beschriftungen und den Zustand der Leiste behält.

Loslegen GitHub

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

Web-eigene Routen

Native sendet Ereignisse für Benutzerabsichten, dann ändert Ihr bestehender Router den Inhalt des WebView.

Serienisierte Icons

__CAPGO_KEEP_0__

Konfigurieren Sie Tabs und Schaltflächen mit SVG, SF Symbol, eingebundener Bildschirmabbildung oder Android-Drawable-Beschreibern.

Native Übergangsschale

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

Zoom Routen

Öffnen Sie Karten, Grid und Medien-Detail-Routen mit gemeinsam-Element-Style-Native-Zoom-Geometrie.

Demo

Native Schale	Tipp-Fluss

Core API

configure(options?) ermöglicht den native Chrome-Host und steuert die Inhalte im Randbereich.
setNavbar(options) aktualisiert Titel, Untertitel, Zurück-Button, Schaltflächen, Farben, Transparenz und Sichtbarkeit.
setTabbar(options) aktualisiert Tabs, ausgewählter Tab, Badges, Etiketten, Icons, Farben und Sichtbarkeit.
beginTransition(options?) erfasst den ausgehenden WebView vor dem JavaScript-Route-Wechsel.
finishTransition(options?) animiert von dem aufgenommenen Snapshot zum 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() liegt die native Implementierungsversionsmarke vor.

Events

navbarBack wird ausgelöst, wenn der native Zurück-Button angeklickt wird.
navbarItemTap wird ausgelöst, wenn ein native Navbar-Action-Button angeklickt wird.
tabSelect wird ausgelöst, wenn eine native Tab-Seite ausgewählt wird.
safeAreaChanged berichtet über Änderungen an native Bar und safe-area Inset.
transitionStart und transitionEnd berichtet über native Übergangsgrenzen.

Plattformmodell

iOS verwendet UINavigationBar und UITabBariOS 26 und neuer verwendet das System, um Liquid Glass-Verhalten zu rendern; ältere Versionen verwenden native durchsichtige/Material-Fallbacks.

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

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.

Wenn Sie “Fortschrittlich von @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation” verwenden Fortschrittlich von @capgo/capacitor-native-navigation Um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Verwendung von Fortschrittlich von @capgo/capacitor-native-navigation Für die native Fähigkeit in Verwendung von Fortschrittlich von @capgo/capacitor-native-navigation Für die native Fähigkeit in Verwendung von Fortschrittlich von @capgo/capacitor-live-activities Fortschrittlich von @capgo/capacitor-live-activities Für die Implementierungsdetail in Fortschrittlich von @capgo/capacitor-live-activities Verwendung von Fortschrittlich von @capgo/capacitor-video-player Fortschrittlich von @capgo/capacitor-native-navigation für die native Fähigkeit in @capgo/capacitor-video-player und @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player.