Lompat ke konten
Capgo - Pembaruan Langsung untuk Aplikasi Capacitor Capgo

@capgo/capacitor-native-navigation

Render navigasi chrome iOS dan Android secara native sambil JavaScript menguasai rute, konten, ikon, label, dan status bar.
Mulai GitHub

Chrome native

Gambar bar navigasi atas dan bar tab bawah dengan antarmuka platform alih-alih komponen web.

Rute dimiliki oleh web

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

Ikon yang diserialisasi

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

Shell transisi native

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

Perbesar rute

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

Demo

Bagian berjudul “Demo”
Shell nativeTekan aliran
Demo navigasi native animasi menampilkan navbar native, tab, dan konten WebViewAliran navigasi native animasi 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, 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 keluar sebelum perubahan JavaScript jalur.
  • finishTransition(options?) animasi 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.
  • getPluginVersion() mengembalikan versi marker implementasi native.

Event

Bab berjudul “Event”
  • navbarBack mengeluarkan ketika affordansi back native ditabalkan.
  • navbarItemTap mengeluarkan ketika tombol aksi navbar native ditabalkan.
  • tabSelect mengeluarkan ketika tab native dipilih.
  • safeAreaChanged melaporkan perubahan inset bar dan area aman native.
  • transitionStart dan transitionEnd laporkan batasan transisi asli.

Model Platform

Judul bagian “Model Platform”

iOS menggunakan UINavigationBar dan UITabBar. Pada iOS 26 dan lebih baru, plugin memungkinkan sistem menampilkan perilaku Liquid Glass; versi yang lebih tua menggunakan fallback transparan/material asli.

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

Plugin tidak membuat satu WebView asli per rute. Versi 1 menjaga satu WebView Capacitor tunggal untuk stabilitas jembatan dan membiarkan asli hanya memiliki frame, bar visual, tab seleksi chrome, pelaporan area aman, dan shell transisi.

Teruskan dari @capgo/capacitor-navigasi asli

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

Jika Anda menggunakan @capgo/capacitor-navigasi asli 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-video-player.