Langsung ke konten
Capgo - Build, rilis, dan update aplikasi Capacitor Capgo

@capgo/capacitor-native-navigation

Render navigasi chrome iOS dan Android secara native, sementara JavaScript tetap mengontrol route, konten, ikon, label, dan status bar.
Mulai sekarang GitHub

Chrome native

Render top navigation bar dan bottom tab bar menggunakan UI platform, bukan web components.

Route milik web

Native memancarkan event user intent, lalu router Anda mengubah konten WebView.

Ikon terserialisasi

Konfigurasi tab dan tombol dengan SVG, SF Symbol, bundled image, atau descriptor Android drawable.

Shell transisi native

Ambil WebView saat ini, update konten di JavaScript, lalu akhiri dengan animasi native snapshot-to-WebView.

Rute zoom

Buka rute card, grid, dan media-detail dengan geometri zoom native bergaya shared-element.

Demo

Bagian berjudul “Demo”
Shell nativeAlur tapNavbar multi-level (iOS)Navbar multi-level (Android)
Demo shell navigasi native dengan animasi yang menampilkan navbar, tab, dan konten WebViewAnimasi alur tap navigasi native yang menampilkan pemilihan tab, transisi push, dan tombol back nativeRekaman iOS baris segmen navbar multi-level: switcher Akun / Organisasi di atas baris section chipsRekaman Android baris segmen navbar multi-level: switcher Akun / Organisasi di atas baris section chips

Inti API

Bagian berjudul “Core API”
  • configure(options?) mengaktifkan native chrome host dan mengontrol content insets.
  • setNavbar(options) memperbarui title, subtitle, tombol back, tombol, warna, transparansi, visibilitas, dan baris segmen multi-level di bawah bar (segments).
  • setTabbar(options) memperbarui tab, tab terpilih, badge, label, ikon, warna, dan visibilitas.
  • beginTransition(options?) menangkap WebView yang sedang keluar sebelum perubahan rute JavaScript.
  • finishTransition(options?) beranimasi dari snapshot yang ditangkap ke WebView live setelah konten rute siap.
  • beginZoomTransition(target, options?) dan finishZoomTransition(target?, options?) adalah helper JavaScript untuk transisi zoom dari elemen atau persegi panjang.
  • getPluginVersion() mengembalikan penanda versi implementasi native.

Event

Bagian berjudul “Events”
  • navbarBack dipicu saat tombol back native ditekan.
  • navbarItemTap dipicu saat tombol aksi navbar native ditekan.
  • navbarSegmentSelect dipicu saat item dalam baris segmen navbar dipilih.
  • tabSelect dipicu saat tab native dipilih.
  • safeAreaChanged melaporkan perubahan native bar dan safe-area inset.
  • transitionStart dan transitionEnd melaporkan batas transisi native.

Model Platform

Bagian berjudul “Model Platform”

iOS menggunakan UINavigationBar dan UITabBar. Pada iOS 26 dan yang lebih baru, plugin ini membiarkan sistem merender perilaku Liquid Glass; versi lama memakai fallback native translucent/material.

Android menggunakan AppCompat toolbar dan Material bottom navigation dengan penempatan edge-to-edge.

Plugin ini tidak membuat satu WebView native per route. Versi 1 mempertahankan satu Capacitor WebView demi stabilitas bridge dan membiarkan native hanya mengelola frame, visual bar, chrome seleksi tab, pelaporan safe-area, dan transition shell.

Lanjutkan dari @capgo/capacitor-native-navigation

Bagian berjudul “Lanjutkan dari @capgo/capacitor-native-navigation”

Jika Anda menggunakan @capgo/capacitor-native-navigation untuk merencanakan perilaku media dan antarmuka native, hubungkan dengan Menggunakan @capgo/capacitor-native-navigation untuk kapabilitas native di bagian Using @capgo/capacitor-native-navigation, Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player untuk kemampuan native di Menggunakan @capgo/capacitor-video-player, dan @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player.