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

@capgo/capacitor-native-Navigation

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

Native Chrome

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 des WebView.

Serienisierte Icons

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

Native Übergangshell

Erteilen Sie dem aktuellen WebView, aktualisieren Sie den Inhalt in JavaScript und beenden Sie 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”
Native ShellTippen Sie in den Fluss
Animierte nativer Navigation-Shell-Demo, die eine native Navbar, Tabs und WebView-Inhalt zeigtAnimierte nativer Navigation-Tippschaltfluss, der die Auswahl der Schaltfläche, die Push-Übergang und die nativen Zurück-Schaltfläche zeigt

Core API

Core API
  • configure(options?) ermöglicht die native Chrome-Host und steuert die 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?) 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() liegt die native Implementierungsversionsmarke vor.

Events

Section titled “Events”
  • navbarBack wird ausgelöst, wenn der native Zurück-Angebot getippt wird.
  • navbarItemTap wird ausgelöst, wenn ein native Navbar-Action-Button angeklickt wird.
  • tabSelect wird ausgelöst, wenn eine native Schaltfläche 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 System, um Liquid Glass-Verhalten zu rendern; ältere Versionen verwenden native translucent/material-Fallbacks.

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

Die Erweiterung 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, verbinden Sie es mit Fügen Sie @capgo/capacitor-native-navigation zur native Fähigkeit in Fügen Sie @capgo/capacitor-native-navigation, Fügen Sie @capgo/capacitor-live-activities zur native Fähigkeit in Fügen Sie @capgo/capacitor-live-activities, @capgo/capacitor-live-activities zur Implementierungsdetail in @capgo/capacitor-live-activities, Fügen 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.