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

@capgo/capacitor-native-navigation

Routen, Inhalte, Icons, Beschriftungen und Statusleiste für iOS- und Android-Navigation rendern, während JavaScript die Kontrolle behält.
Loslegen GitHub

Natives Chrome

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

Web-eigene Routen

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

Serienisierte Icons

Konfigurieren Sie Tabs und Schaltflächen mit SVG, SF Symbol, eingebundener 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

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

Demo

Demo
Native shellTap flow
Animierter Demo-Bildschirm für native Navigation, mit native Navbar, Tabs und WebView-InhaltAnimierter Demo-Bildschirm für native Navigation, mit Tab-Auswahl, Push-Übergang und native Zurück

Core API

Abschnitt: Core API
  • configure(options?) ermöglicht die native Chrome-Host-Verwaltung und steuert die Inhalte-Einrückungen.
  • setNavbar(options) aktualisiert native Titel, Untertitel, Zurück-Button, Buttons, Farben, Transparenz und Sichtbarkeit.
  • setTabbar(options) aktualisiert Tabs, ausgewählter Tab, Badges, Bezeichnungen, Icons, Farben und Sichtbarkeit.
  • beginTransition(options?) fängt den ausgehenden WebView vor dem JavaScript-Route-Wechsel ein.
  • finishTransition(options?) animiert von dem gespeicherten Snapshot zum lebenden WebView nach Inhalt-Route-Ready.
  • beginZoomTransition(target, options?) sind JavaScript-Hilfsmittel für Zoom-Übergänge von Elementen oder Rechtecken. finishZoomTransition(target?, options?) gibt die Versionsmarke der nativen Implementierung zurück.
  • getPluginVersion() Events

Abschnitt mit dem Titel „Events“

wird ausgelöst, wenn die native Back-Funktion getippt wird.
  • navbarBack wird ausgelöst, wenn ein native Navbar-Aktionstaste getippt wird.
  • navbarItemTap wird ausgelöst, wenn ein native Tab ausgewählt wird.
  • tabSelect meldet native Bar- und Safe-Area-Einsetzungen.
  • safeAreaChanged sind
  • transitionStart melden native Übergangsgrenzen. transitionEnd Platform Model

are JavaScript-Hilfsmittel für Zoom-Übergänge von Elementen oder Rechtecken.

Platform-Modell

iOS verwendet UINavigationBar und UITabBar. Bei iOS 26 und neueren Versionen lässt das Plugin dem System das Rendering von Liquid Glass-Verhalten zu; ä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 einzelnen native WebViews pro Route. Version 1 hält ein einzelnes Capacitor WebView für Brücke-Stabilität und lässt natives nur den Rahmen, die Bar-Visuals, die Tab-Selektion-Chrome, die sichere Bereich-Berichterstattung und die Übergangsschale besitzen.

Weitergehen von @capgo/capacitor-native-Navigation

Section titled “Weitergehen von @capgo/capacitor-native-Navigation”

Wenn Sie native Medien und Schnittstellenverhalten planen möchten, verwenden Sie @capgo/capacitor-native-Navigation um es mit Verwenden Sie @capgo/capacitor-native-Navigation für die native Fähigkeit in @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