Zum Inhalt springen
Capgo - Capacitor-Apps bauen, ausliefern und updaten Capgo

@capgo/capacitor-native-navigation

iOS- und Android-Navigationselemente werden nativ gerendert, während JavaScript weiterhin die Kontrolle über Routes, Inhalte, Icons, Labels und den Bar-State behält.
Loslegen GitHub

Native Chrome

Die obere Navigationsleiste und die untere Tab-Bar werden mit nativen UI-Elementen statt Web Components gezeichnet.

Web-basierte Routen

Native sendet User-Intent-Events, woraufhin dein bestehender Router den WebView-Inhalt ändert.

Serialisierte Icons

Konfiguriere Tabs und Buttons via SVG, SF Symbol, Bundled Image oder Android Drawable.

Native Transition Shell

Erfasse den aktuellen WebView, aktualisiere den Inhalt in JavaScript und schließe den Vorgang mit einer nativen Snapshot-to-WebView-Animation ab.

Zoom-Routen

Öffne Card-, Grid- und Media-Detail-Routen mit nativem Zoom via Shared-Element-Geometrie.

Demo

Abschnitt mit dem Titel „Demo“
Native ShellTap-FlowMulti-Level Navbar (iOS)Mehrstufige Navbar (Android)
Animierte Demo der nativen Navigation mit nativer Navbar, Tabs und WebView-InhaltAnimierter Tap-Flow der nativen Navigation mit Tab-Auswahl, Push-Transition und nativem Back-ButtoniOS-Aufnahme einer mehrstufigen Navbar mit Segment-Rows: Ein Account-/Organization-Switcher über einer Reihe von Section-ChipsAndroid-Aufnahme einer mehrstufigen Navbar mit Segment-Reihen: Ein Account-/Organisations-Switcher über einer Reihe von Section-Chips

Kern von API

Abschnitt mit dem Titel „Core API“
  • configure(options?) aktiviert den nativen Chrome-Host und steuert die Content-Insets.
  • setNavbar(options) aktualisiert nativen Titel, Untertitel, Back-Button, Buttons, Farben, Transparenz, Sichtbarkeit und mehrstufige Segment-Rows unter der Bar (segments).
  • setTabbar(options) aktualisiert Tabs, ausgewählten Tab, Badges, Labels, Icons, Farben und Sichtbarkeit.
  • beginTransition(options?) erfasst die ausgehende WebView vor dem JavaScript-Route-Change.
  • finishTransition(options?) animiert vom aufgenommenen Snapshot zur Live-WebView, sobald der Route-Content bereit ist.
  • beginZoomTransition(target, options?) und finishZoomTransition(target?, options?) sind JavaScript-Helfer für Zoom-Übergänge von Elementen oder Rechtecken.
  • getPluginVersion() gibt den Versionsmarker der nativen Implementierung zurück.

Events

Abschnitt „Events“
  • navbarBack wird ausgelöst, wenn die native Zurück-Funktion angetippt wird.
  • navbarItemTap wird ausgelöst, wenn ein Button in der nativen Navbar angetippt wird.
  • navbarSegmentSelect wird ausgelöst, wenn ein Element in einer Navbar-Segmentzeile ausgewählt wird.
  • tabSelect wird ausgelöst, wenn ein nativer Tab ausgewählt wird.
  • safeAreaChanged meldet Änderungen der nativen Bar- und Safe-Area-Insets.
  • transitionStart und transitionEnd meldet native Übergangsgrenzen.

Plattformmodell

Abschnitt mit dem Titel „Plattformmodell“

iOS verwendet UINavigationBar und UITabBarAb iOS 26 und neuer ermöglicht das Plugin dem System, das Liquid Glass-Verhalten zu rendern; ältere Versionen nutzen native Fallbacks für Transparenz/Material.

Android nutzt eine AppCompat Toolbar und Material Bottom Navigation mit Edge-to-Edge-Platzierung.

Das Plugin erstellt nicht pro Route eine native WebView. Version 1 behält eine einzige Capacitor WebView für die Bridge-Stabilität bei und überlässt der nativen Ebene nur den Frame, die Bar-Visuals, die Tab-Selection, das Safe-Area-Reporting und das Transition-Shell.

Weiterlesen bei @capgo/capacitor-native-navigation

Abschnitt mit dem Titel „Weiterlesen bei @capgo/capacitor-native-navigation“

Wenn du es nutzt @capgo/capacitor-native-navigation , um natives Media- und Interface-Verhalten zu planen, verbinde es mit Verwendung von @capgo/capacitor-native-navigation für die native Funktionalität bei der Nutzung von @capgo/capacitor-native-navigation, @capgo/capacitor-live-activities verwenden für die native Funktion in „@capgo/capacitor-live-activities verwenden“, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities, Verwendung von @capgo/capacitor-video-player für die native Funktion in „@capgo/capacitor-video-player verwenden“, und @capgo/capacitor-video-player für das Implementierungsdetail in @capgo/capacitor-video-player.