Lebih cepat ke konten
Capgo - Pembaruan Langsung untuk Aplikasi Capacitor Capgo

@capgo/capacitor-navigasi native

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

Native Chrome

Gambarlah bar navigasi atas dan tab bawah dengan antarmuka platform bukan komponen web.

Rute yang dimiliki web

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

Icon yang diserialkan

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

Shell transisi native

Captur WebView saat ini, update konten di JavaScript, kemudian selesaikan dengan animasi snapshot ke WebView native.

Zoom rute

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

Demo

Judul bagian “Demo”
Shell nativeAliran sentuh
Demo animasi navigasi native yang menampilkan navbar native, tab, dan konten WebViewDemo animasi navigasi tap native yang menampilkan seleksi tab, transisi push, dan tombol kembali native

Inti API

Judul Bagian berjudul “Core API”
  • configure(options?) Mengaktifkan host chrome native dan mengontrol margin konten.
  • setNavbar(options) Mengupdate judul native, subjudul, tombol kembali, tombol, warna, ketajaman, dan visibilitas.
  • setTabbar(options) Mengupdate tab, tab yang dipilih, badge, label, ikon, warna, dan visibilitas.
  • beginTransition(options?) Mengabadikan WebView keluaran sebelum perubahan jalur JavaScript.
  • finishTransition(options?) Menganimasikan dari snapshot yang diabadikan ke WebView hidup setelah konten jalur siap.
  • beginZoomTransition(target, options?) dan finishZoomTransition(target?, options?) context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan).
  • getPluginVersion() adalah Bantuan JavaScript untuk transisi zoom dari elemen atau persegi panjang.

Mengembalikan versi marker implementasi native.

Event
  • navbarBack Judul Bagian berjudul “Event” (Bahasa Indonesia: ‘Event’ atau ‘Kejadian’ tidak perlu ditambah judul, karena sudah jelas apa yang dimaksudkan oleh ‘Event’ dalam konteks ini, jadi cukup ‘Event’ saja).
  • navbarItemTap mengeluarkan peristiwa ketika tombol aksi native navbar diklik.
  • tabSelect mengeluarkan peristiwa ketika tab native dipilih.
  • safeAreaChanged melaporkan perubahan inset native bar dan area yang aman.
  • transitionStart dan transitionEnd melaporkan batas transisi native.

Model Platform

Judul bagian “Model Platform”

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

Android menggunakan toolbar AppCompat dan navigasi bawah material dengan penempatan tepi ke tepi.

Plugin ini tidak membuat satu WebView native per rute. Versi 1 menjaga satu WebView Capacitor tunggal untuk stabilitas jembatan dan membiarkan native mengontrol hanya frame, bar visual, tab seleksi chrome, laporan area yang aman, dan shell transisi.

Teruskan dari @capgo/capacitor-navigasi-natif

Judul bagian “Teruskan dari @capgo/capacitor-navigasi-natif”

Jika Anda menggunakan @capgo/capacitor-navigasi-natif untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Menggunakan @capgo/capacitor-navigasi-natif untuk kemampuan native di Menggunakan @capgo/capacitor-navigasi-natif, Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan native di Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, Menggunakan @capgo/capacitor-player-video untuk kemampuan asli dalam Menggunakan @capgo/capacitor-video-player, dan @capgo/capacitor-video-player untuk detail implementasi dalam @capgo/capacitor-video-player.