跳过内容
Capgo - Capacitor 应用实时更新 Capgo

@capgo/capacitor-native-navigation

原生渲染iOS和Android导航栏，JavaScript仍然控制路由、内容、图标、标签和状态栏
开始使用 GitHub

原生 Chrome

使用原生 UI 绘制顶部导航栏和底部标签栏，而不是 web 组件。

web 所有路由

原生发送用户意图事件，然后您的现有路由器改变 WebView 内容。

序列化图标

使用 SVG、SF Symbol、内置图像或 Android drawable 描述符配置选项卡和按钮。

原生过渡壳

捕获当前 WebView、在 JavaScript 中更新内容，然后以原生快照到 WebView 动画结束。

缩放路由

打开带有共享元素样式原生缩放几何的卡片、网格和媒体详细路由。

演示

标题为“演示”
原生壳点击流
原生导航壳动画演示，展示原生导航栏、选项卡和 WebView 内容原生导航点击流动画演示，展示选项卡选择、推送过渡和原生后退

核心 API

Core API
  • configure(options?) 启用本地浏览器宿主和控制内容边距。
  • setNavbar(options) 更新本地标题、副标题、后退按钮、按钮、颜色、透明度和可见性。
  • setTabbar(options) 更新标签页、选中标签页、徽章、标签、图标、颜色和可见性。
  • beginTransition(options?) 捕获 WebView 之前 JavaScript 路由更改。
  • finishTransition(options?) 从捕获的快照到 live WebView 进行动画，路由内容准备好后。
  • beginZoomTransition(target, options?) 并 finishZoomTransition(target?, options?) 用于元素或矩形的缩放过渡的 JavaScript 帮助。
  • getPluginVersion() 返回本地实现版本标记。

事件

启用本地浏览器宿主和控制内容边距。
  • navbarBack fires when the native back affordance is tapped.
  • navbarItemTap fires when a native navbar action button is tapped.
  • tabSelect fires when a native tab is selected.
  • safeAreaChanged reports native bar and safe-area inset changes.
  • transitionStart 和 transitionEnd report native transition boundaries.

平台模型

平台模型

iOS 使用 UINavigationBar 和 UITabBar. 在 iOS 26 和更高版本中，插件让系统渲染 Liquid Glass 行为；旧版本使用原生透明/材料 fallbacks。

Android 使用 AppCompat 工具栏和 Material 底部导航栏，边缘到边缘放置。

该插件不创建一个原生 WebView per 路由。版本 1 保持一个单个 Capacitor WebView 以便桥梁稳定，让原生拥有仅仅是框架，条形视觉，标签选择 Chrome，安全区域报告和过渡壳。

继续使用@capgo/capacitor-native-navigation

标题：继续使用@capgo/capacitor-native-navigation

如果您正在使用 @capgo/capacitor-native-navigation 来规划原生媒体和界面行为，连接它与 使用@capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation, 使用@capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-live-activities, 使用@capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, @capgo/capacitor-live-activities {"targetLanguage":"Simplified Chinese","pagePath":"/zh/docs/plugins/native-navigation/","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"items":[{"text":"为使用@capgo/capacitor-video-player的原生能力，和"},{"text":"@capgo/capacitor-video-player"},{"text":"为@capgo/capacitor-video-player的实现细节"},{"text":"编辑页面"}]} targetLanguage=Simplified Chinese&pagePath=/zh/docs/plugins/native-navigation/&protectedTokens=Cloudflare,Capacitor,GitHub,Capgo,code,API,SDK,CLI,npm,bun&items%5B0%5D%5Btext%5D=为使用%40capgo/%capacitor-video-player的原生能力，和&items%5B1%5D%5Btext%5D=%40capgo/%capacitor-video-player&items%5B2%5D%5Btext%5D=为%40capgo/%capacitor-video-player的实现细节&items%5B3%5D%5Btext%5D=编辑页面 targetLanguage=Simplified Chinese&pagePath=/zh/docs/plugins/native-navigation/&protectedTokens=Cloudflare,Capacitor,GitHub,Capgo,code,API,SDK,CLI,npm,bun&items%5B0%5D%5Btext%5D=%E4%BA%8E%E4%BD%BF%E7%94%A8%40capgo/%capacitor-video-player%E7%9A%84%E5%8E%9F%E7%94%9F%E8%83%BD%E5%8A%9F%E5%92%8C&items%5B1%5D%5Btext%5D=%40capgo/%capacitor-video-player&items%5B2%5D%5Btext%5D=%E4%BA%8E%40capgo/%capacitor-video-player%E7%9A%84%E5%AE%9E%E7%8E%B0%E7%BB%86%E8%8A%82&items%5B3%5D%5Btext%5D=%E7%BC%96%E8%BE%91%E9%A1%B5%E9%9D%A2