Lompat ke konten

@capgo/capacitor-navigasi asli

Tampilkan chrome navigasi iOS dan Android secara asli sambil JavaScript tetap mengontrol rute, konten, ikon, label, dan status bar.

Chrome asli

Tampilkan bar navigasi atas dan tab bawah dengan UI 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 selesaikan dengan animasi snapshot ke WebView native.

Zoom rute

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

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
  • 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?) menangkap WebView keluaran sebelum perubahan JavaScript jalur.
  • finishTransition(options?) animasi dari tangkapan layar yang disimpan 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 versi marker implementasi native.
  • navbarBack mengeluarkan peristiwa ketika affordance kembali native ditabalkan.
  • navbarItemTap mengeluarkan peristiwa ketika tombol aksi navbar native ditabalkan.
  • tabSelect mengeluarkan peristiwa ketika tab native dipilih.
  • safeAreaChanged melapork perubahan bar dan inset area aman.
  • transitionStart dan transitionEnd melapork batasan transisi native.

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 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, visual bar, pilihan tab, chrome pilihan aman, dan shell transisi.

Teruskan dari @capgo/capacitor-native-navigation

Judul Bagian “Teruskan dari @capgo/capacitor-native-navigation”

Jika 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.