@capgo/capacitor-原生导航

原生浏览器

使用平台UI绘制顶部导航栏和底部标签栏，而不是Web组件。

Web拥有的路由

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

序列化图标

配置标签和按钮使用SVG、SF符号、捆绑图像或Android drawable描述符。

原生过渡壳

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

缩放路由

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

演示

原生 shell	点击流程

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 当原生后退手柄被点击时触发。
• navbarItemTap 当原生导航栏操作按钮被点击时触发。
• tabSelect 当原生选项卡被选中时触发。
• safeAreaChanged 报告原生栏和安全区域内边距的变化。
• transitionStart 和 transitionEnd 报告原生过渡边界。

平台模型

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

安卓使用 AppCompat 工具栏和 Material 底部导航栏，边缘到边缘。

插件不创建一个本机 WebView per 路由。版本 1 保持一个单独的 Capacitor WebView 以便桥梁稳定，让本机只拥有框架、条形视觉、选项卡选择 Chrome、安全区域报告和过渡壳。

继续阅读 @capgo/capacitor-native-navigation

如果您正在使用 @capgo/capacitor-原生导航 来规划本机媒体和界面行为，连接它与 使用 @capgo/capacitor-native-navigation 为使用@capgo/capacitor原生导航而设计的 使用@capgo/capacitor实时活动 为使用@capgo/capacitor原生导航而设计的 @capgo/capacitor实时活动 为@capgo/capacitor实时活动的实现细节 使用@capgo/capacitor视频播放器 为使用@capgo/capacitor视频播放器而设计的原生能力 @capgo/capacitor视频播放器 为@capgo/capacitor视频播放器的实现细节