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

@capgo/capacitor-native-Navigation

Rendere iOS- und Android-Navigation chrome nativ, 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 der WebView.

Serienisierte Icons

__CAPGO_KEEP_0__

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

Native Übergangsschale

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

Zoom Routen

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

Demo

Abschnitt mit dem Titel „Demo“
Native SchaleTipp-Fluss
Animierte nativer Navigationsschale-Demo, die native Navbar, Tabs und WebView-Inhalt zeigtAnimierte nativer Navigationstipp-Fluss, der die Auswahl von Tabs, Push-Übergang und native Zurück zeigt

Core API

Core API
  • configure(options?) ermöglicht den native Chrome-Host und steuert die Inhalte der Ecken.
  • setNavbar(options) aktualisiert native Titel, Untertitel, Zurück-Button, Schaltflächen, Farben, Transparenz und Sichtbarkeit.
  • setTabbar(options) aktualisiert Tabs, ausgewählter Tab, Badges, Bezeichnungen, 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?) JavaScript-Hilfsmittel für Zoom-Übergänge von Elementen oder Rechtecken.
  • getPluginVersion() die native Implementierungsversionsmarker zurückgibt.

Events

Abschnitt: Ereignisse
  • navbarBack fires wenn der native Zurück-Button getippt 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-Einrasten.
  • transitionStart und transitionEnd berichtet über native Übergangsgrenzen.

Plattformmodell

Abschnitt mit dem Titel "Plattformmodell"

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

Android verwendet einen AppCompat-Toolbar und Material-Bottom-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ückengeschwindigkeit und lässt native nur den Rahmen, die Bar-Visualisierung, die Tab-Auswahl-Chrome, die safe-Area-Berichterstattung und die Übergangshülle besitzen.

Fortschrittlich von @capgo/capacitor-native-navigation

Abschnitt mit dem Titel “Fortschrittlich von @capgo/capacitor-native-navigation”

Wenn Sie Native-Navigation verwenden @capgo/capacitor-native-navigation um native Medien und Schnittstellenverhalten zu planen und zu verbinden Verwenden Sie @capgo/capacitor-native-navigation zur Verbindung mit der native Fähigkeit in Verwenden Sie @capgo/capacitor-native-navigation Verwenden Sie @capgo/capacitor-live-activities zur Verbindung mit der native Fähigkeit in Verwenden Sie @capgo/capacitor-live-activities @capgo/capacitor-live-activities zur Verbindung mit dem Implementierungsdetail in @capgo/capacitor-live-activities Verwenden Sie @capgo/capacitor-video-player 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.