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

@capgo/capacitor-native-navigation

Rendern Sie die iOS- und Android-Navigation chrome-nativ, während JavaScript die Routen, Inhalte, Icons, Beschriftungen und den Status der Leiste besitzt.
Loslegen GitHub

Natives Chrome

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

Web-besitzene Routen

Natives Chrome sendet Ereignisse für Benutzerabsichten, dann ändert Ihr bestehender Router den Inhalt der WebView.

Geserielerte Icons

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

Natives Übergangsshell

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

Zoomrouten

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

Demo

Abschnitt mit dem Titel „Demo“
Natives ShellTippen Sie in den Fluss
Animierte nativer Navigationsshell-Demo, die native Navbar, Tabs und WebView-Inhalt zeigtAnimierte nativer Navigationstap-Flow, der die Auswahl der Schaltfläche, die Push-Übergang und die nativen Zurück-Button zeigt

Core API

Abschnitt mit dem Titel “Kern API”
  • configure(options?) ermöglicht den native Chrome-Host und steuert die Inhalte-Einrückungen.
  • setNavbar(options) aktualisiert den native Titel, Untertitel, Rück-Button, Buttons, Farben, Transparenz und Sichtbarkeit.
  • setTabbar(options) aktualisiert Tabs, ausgewählter Tab, Badges, Bezeichnungen, Icons, Farben und Sichtbarkeit.
  • beginTransition(options?) erfasst den ausgehenden WebView vor der JavaScript-Route-Änderung.
  • finishTransition(options?) animiert von dem aufgenommenen Snapshot zum lebenden WebView nach der Route-Inhaltsbereitschaft.
  • beginZoomTransition(target, options?) und finishZoomTransition(target?, options?) sind JavaScript-Hilfsmittel für Zoom-Übergänge von Elementen oder Rechtecken.
  • getPluginVersion() kehrt die native Implementierungsversionssymbol zurück.

Events

Abschnitt mit dem Titel “Events”
  • navbarBack triggert, wenn der native Rück-Button angeklickt wird.
  • navbarItemTap fires when ein native Navbar-Action-Button angeklickt wird.
  • tabSelect fires when eine native Tab ausgewählt wird.
  • safeAreaChanged berichtet über native Bar- und safe-Area-Einsetzungen.
  • transitionStart und transitionEnd berichtet über native Übergangsgrenzen.

Plattformmodell

Abschnitt mit dem Titel „Plattformmodell“

iOS verwendet UINavigationBar und UITabBar. Auf iOS 26 und neueren Versionen lässt das Plugin dem System Liquid Glass-Verhalten rendern; ältere Versionen verwenden native durchsichtige/Material-Fallbacks.

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

Das Plugin erstellt keine einzelne native WebView pro Route. Version 1 hält eine einzelne Capacitor WebView für Brückengeschwindigkeit und lässt native nur den Rahmen, die Bar-Visuals, die Tab-Auswahl-Chrome, die safe-Area-Berichterstattung und die Übergangshülle besitzen.

Weitermachen von @capgo/capacitor-native-navigation

Abschnitt mit dem Titel „Weitermachen von @capgo/capacitor-native-navigation”

Wenn Sie native media und Interfaceverhalten planen, verwenden Sie @capgo/capacitor-native-navigation um es mit Verwenden Sie @capgo/capacitor-native-navigation für die native Fähigkeit in Verwenden Sie @capgo/capacitor-native-navigation, Verwenden Sie @capgo/capacitor-live-activities für die native Fähigkeit in Verwenden Sie @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierungsdetail in @capgo/capacitor-live-activities, Verwenden Sie @capgo/capacitor-video-player für die native Fähigkeit in Verwendung von @capgo/capacitor-video-player und @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player.