Lompat ke Konten
Capgo - Pembaruan Langsung untuk Aplikasi Capacitor Capgo

@capgo/capacitor-navigasi native

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

Chrome Asli

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

Rute Milik Web

Native mengirimkan event niat pengguna, kemudian router Anda mengubah konten WebView.

Icon yang Dibuat Terlebih Dahulu

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 selesai dengan animasi snapshot ke-WebView native.

Rute zoom

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

Demo

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

Inti API

Judul Bagian ‘API’
  • configure(options?) mengaktifkan host chrome native dan mengontrol margin konten.
  • setNavbar(options) mengupdate judul native, subjudul, tombol kembali, tombol, warna, transparansi, dan visibilitas.
  • setTabbar(options) mengupdate tab, tab yang dipilih, badge, label, ikon, warna, dan visibilitas.
  • beginTransition(options?) menangkap WebView keluaran sebelum perubahan JavaScript jalur.
  • finishTransition(options?) menganimasikan dari snapshot yang ditangkap 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 marker implementasi native.

Event

Judul Bagian ‘Event’
  • navbarBack mengeluarkan ketika affordance kembali native disentuh.
  • navbarItemTap mengeluarkan ketika tombol aksi navbar native diklik.
  • tabSelect mengeluarkan 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 tua 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-pemain-video untuk kemampuan asli di Menggunakan @capgo/capacitor-video-player, dan @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player.