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

@capgo/capacitor-native-navigation

iOS- und Android-Navigation chrome natively renderen, während JavaScript Routen, Inhalte, Icons, Beschriftungen und Status der Leiste behält.
Los geht's GitHub

Natives Chrome

Zeichnen Sie die oberen Navigationsleiste und die unteren Tab-Leiste mit Plattform-UI anstatt mit Web-Komponenten.

Web-eigene Routen

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

Serienisierte Icons

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

Native-Übergangsschale

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

Zoom-Routen

Öffnen Sie Karten-, Grid- und media-detail-Routen mit gemeinsamer Element-Style-Animation für nativen Zoom-Geometrien.

Demo

Abschnitt mit dem Titel „Demo“
Native-SchaleTap flow
Animierte native Navigation-Shell-Demo, die native Navbar, Tabs und WebView-Inhalte zeigtAnimierte native Navigation-Tap-Flow, der die Tab-Auswahl, Push-Übergang und native Zurück-Button zeigt

Core API

Abschnitt mit dem Titel „Core API”
  • configure(options?) ermöglicht den native Chrome-Host und steuert die Inhalte-Einrückungen.
  • setNavbar(options) aktualisiert den native Titel, Untertitel, Zurück-Button, Buttons, 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 dem JavaScript-Route-Wechsel ein.
  • finishTransition(options?) animiert von dem gespeicherten 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() gibt die native Implementierungsversion an.

Events

Abschnitt mit dem Titel “Events”
  • navbarBack wird ausgelöst, wenn die native Zurück-Verfügbarkeit getippt wird.
  • navbarItemTap wird ausgelöst, wenn ein native Navbar-Aktionen-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 berichtet native Übergangsgrenzen.

Plattformmodell

Abschnitt mit dem Titel “Plattformmodell”

iOS verwendet UINavigationBar und UITabBar. Auf iOS 26 und neuer ermöglicht das Plugin dem System die Liquid Glass-Behavior zu rendern; ältere Versionen verwenden native translucent/material-Fallbacks.

Android verwendet einen AppCompat-Toolbar und Material-Bottom-Navigation mit edge-to-edge-Platzierung.

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-Selektion-Chrome, die safe-Area-Berichterstattung und die Übergangshülle besitzen.

Weitergehen von @capgo/capacitor-native-Navigation

Abschnitt mit dem Titel “Weitergehen von @capgo/capacitor-native-Navigation”

Wenn Sie native media und Interface-Verhalten verwenden @capgo/capacitor-native-Navigation um native Medien und Interface-Verhalten 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-Aktivitäten für die native Fähigkeit in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierungsdetail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player für die native Fähigkeit in Using @capgo/capacitor-video-player und @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player.