Zum Inhalt springen
Capgo - Capacitor-Apps erstellen, verteilen und aktualisieren Capgo

@capgo/capacitor-native-Navigation

Rendern Sie iOS- und Android-Navigation chrome nativ, während JavaScript die Routen, Inhalte, Icons, Beschriftungen und den Zustand der Leiste verwaltet.
Loslegen GitHub

Native Chrome

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

Web-eigene Routen

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

Serialisierte Icons

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

Native Übergangshell

Erteilen Sie dem aktuellen WebView, aktualisieren Sie den Inhalt in JavaScript und beenden Sie dann mit einer nativen Snapshot-zu-WebView-Animation.

Zoom-Routen

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

Demo

Abschnitt mit dem Titel “Demo”
Native-ShellTap-Flow
Animierte native Navigation-Shell-Demo, die native Navbar, Tabs und WebView-Inhalte zeigtAnimierte native Navigation-Tap-Flow zeigt Tab-Auswahl, Push-Übergang und native Zurück-Taste

Core API

Sektion mit dem Titel “Core API”
  • configure(options?) Ermöglicht die native Chrome-Host-Verwaltung und steuert die Inhalte-Einrückungen.
  • setNavbar(options) Aktualisiert die native Titelzeile, Untertitelzeile, Zurück-Button, Schaltflächen, Farben, Transparenz und Sichtbarkeit.
  • setTabbar(options) Aktualisiert die Tabs, die ausgewählte Tab, Badges, Etiketten, Icons, Farben und Sichtbarkeit.
  • beginTransition(options?) Erfasst die ausgehende WebView vor dem JavaScript-Route-Wechsel.
  • finishTransition(options?) animiert von der aufgenommenen Snapshot zur 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 Implementierungsversion des Markierungssymbols zurückgibt.

Ereignisse

Sektion mit dem Titel ‘Ereignisse’
  • navbarBack ausgelöst wird, wenn die native Zurück-Verfügbarkeit angeklickt wird.
  • navbarItemTap ausgelöst wird, wenn ein native Navbar-Aktionstaste angeklickt wird.
  • tabSelect ausgelöst wird, wenn ein native Tab ausgewählt wird.
  • safeAreaChanged meldet native Bar- und Safe-Area-Einsetzungen.
  • transitionStart und transitionEnd meldet native Übergangsgrenzen.

Plattformmodell

Abschnitt mit dem Titel “Plattformmodell”

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

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

The plugin does not create one native WebView per route. Version 1 keeps a single Capacitor WebView for bridge stability and lets native own only the frame, bar visuals, tab selection chrome, safe-area reporting, and transition shell.

Fortsetzen von @capgo/capacitor-native-navigation

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

Wenn Sie Capgo verwenden @capgo/capacitor-Native-Navigation um native Medien und Schnittstellenverhalten zu planen, mit ihm zu verbinden Sie verwenden @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 @capgo/capacitor-live-activities, @capgo/capacitor-live-aktivitäten für die Implementierungsdetail 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 Implementierungsdetail in @capgo/capacitor-video-player.