Lompat ke konten
Capgo - Pembaruan Langsung untuk Aplikasi Capacitor Capgo

@capgo/capacitor-native-navigation

Tampilkan navigasi iOS dan Android secara native sambil JavaScript mengontrol rute, konten, ikon, label, dan status bar.
Mulai GitHub

Chrome Asli

Gambarkan bar navigasi atas dan tab bawah dengan UI platform bukan komponen web.

Rute yang dimiliki Web

Native mengirimkan event niat pengguna, kemudian router yang sudah ada mengubah konten WebView.

Ikon yang diserialkan

Konfigurasi tab dan tombol dengan SVG, SF Symbol, gambar yang dibundel, atau deskriptor gambar Android.

Transisi Shell Asli

Tangkap WebView saat ini, update konten di JavaScript, kemudian selesai dengan animasi snapshot ke WebView native.

Zoom rute

Buka rute kartu, grid, dan media-detail dengan geometri zoom elemen native yang disebarkan.

Demo

Bagian berjudul “Demo”
Shell nativeSentuh aliran
Demo animasi shell navigasi native menampilkan navbar native, tab, dan konten WebViewDemo animasi navigasi sentuh native menampilkan pilihan tab, transisi push, dan tombol kembali native

Core API

Bagian berjudul “Core API”
  • configure(options?) mengaktifkan host chrome native dan mengontrol margin konten.
  • setNavbar(options) mengupdate judul native, subjudul, tombol kembali, tombol-tombol, warna, ketepatan, dan visibilitas.
  • setTabbar(options) mengupdate tab, tab yang dipilih, badge, label, ikon, warna, dan visibilitas.
  • beginTransition(options?) merekam WebView keluaran sebelum perubahan JavaScript jalur.
  • finishTransition(options?) animasi dari snapshot yang direkam ke WebView hidup setelah konten jalur siap.
  • beginZoomTransition(target, options?) dan finishZoomTransition(target?, options?) adalah bantuan JavaScript untuk transisi zoom dari elemen atau persegi panjang.
  • getPluginVersion() mengembalikan tanda pembaruan versi implementasi native.

Acara

Judul bagian “Acara”
  • navbarBack mengeluarkan ketika affordance kembali native disentuh.
  • navbarItemTap mengeluarkan ketika tombol aksi navbar native disentuh.
  • tabSelect mengeluarkan ketika tab native dipilih.
  • safeAreaChanged melaporkkan perubahan bar dan inset area yang aman.
  • transitionStart dan transitionEnd melaporkan batasan transisi native.

Model Platform

Bab berjudul “Model Platform”

iOS menggunakan UINavigationBar dan UITabBar. Pada iOS 26 dan yang lebih baru, plugin memungkinkan sistem untuk mengrender perilaku Liquid Glass; versi yang lebih tua menggunakan fallback material translucent/native.

Android menggunakan toolbar AppCompat dan navigasi bawah material dengan penempatan edge-to-edge.

Plugin tidak membuat satu WebView native per rute. Versi 1 menjaga WebView tunggal Capacitor untuk stabilitas bridge dan membiarkan native mengontrol hanya frame, visual bar, pilihan tab, chrome, pelaporan area aman, dan shell transisi.

Teruskan dari @capgo/capacitor-native-navigation

Bab berjudul “Teruskan dari @capgo/capacitor-native-navigation”

If Anda menggunakan @capgo/capacitor-native-navigation untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan native di Menggunakan @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-player video.