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

@capgo/capacitor-native-navigation

Führen Sie iOS- und Android-Navigation chrome natively aus, während JavaScript die Routen, Inhalte, Icons, Beschriftungen und den Zustand der Leiste behält.
Loslegen GitHub

Native Chrome

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

Web-besitzene Routen

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

Serialisierte Icons

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

Native Übergangsschale

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

Zoomrouten

Karte, Grid und Medien-Detail-Routen öffnen mit gemeinsamem Element-Stil-Nativer-Zoom-Geometrie

Demo

Abschnitt mit dem Titel „Demo“
Natives ShellTastenfluss
Animierte nativ navigierende Tastenfluss-Demo, die nativen Navbar, Tabs und WebView-Inhalt zeigtAnimierte nativ navigierende Tastenfluss-Demo, die die Auswahl von Tabs, Push-Übergang und nativen Back zeigt

Core API

Abschnitt mit dem Titel „Core API“
  • configure(options?) ermöglicht die native Chrome-Host und steuert Inhalte-Einrückungen.
  • setNavbar(options) aktualisiert native 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?) fängt das ausgehende WebView vor der JavaScript-Route-Änderung ein.
  • 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() gibt die native Implementierungsversionssymbol zurück.

Ereignisse

Abschnitt mit dem Titel „Ereignisse“
  • navbarBack wird ausgelöst, wenn der native Zurück-Button getippt wird.
  • navbarItemTap wird ausgelöst, wenn ein native Navbar-Aktion-Button getippt wird.
  • tabSelect wird ausgelöst, wenn ein native Tab ausgewählt wird.
  • safeAreaChanged berichtet native Bar und Safe-Area-Einsetzungen.
  • transitionStart und transitionEnd native Übergangsgrenzen meldet.

Plattformmodell

Sektion mit dem Titel “Plattformmodell”

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

Android verwendet einen AppCompat-Toolbar und eine Material-Unter-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ücke-Stabilität und lässt native nur den Rahmen, die Bar-Visuals, die Tab-Auswahl-Chrome, die Safe-Area-Berichterstattung und die Übergangshülle besitzen.

Fortsetzen von @capgo/capacitor-native-Navigation

Sektion mit dem Titel “Fortsetzen von @capgo/capacitor-native-Navigation”

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