跳过内容

@capgo/capacitor-native-navigation

在 JavaScript 保持路线、内容、图标、标签和状态栏的所有权的情况下,原生地渲染 iOS 和 Android 导航栏.

原生 chrome

使用平台 UI 代替 Web 组件绘制顶部导航栏和底部标签栏。

Web 所有路由

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

序列化图标

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

原生过渡壳

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

缩放路由

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

演示

示例
原生 shell点击流
原生导航 shell 动画示例,显示原生导航栏、标签页和 WebView 内容原生导航点击流动画示例,显示标签页选择、推送过渡和原生后退

核心 API

核心 API
  • configure(options?) 使原生 Chrome 主机启用并控制内容边距。
  • setNavbar(options) 更新原生标题、副标题、后退按钮、按钮、颜色、透明度和可见性。
  • setTabbar(options) 更新标签页、选中标签页、徽章、标签、图标、颜色和可见性。
  • beginTransition(options?) 在 JavaScript 路由变化之前捕获 WebView 的输出。
  • finishTransition(options?) 在路由内容准备就绪后,从捕获的快照中动画到 live WebView。
  • beginZoomTransition(target, options?) 和是用于元素或矩形的缩放过渡的JavaScript帮助程序。 finishZoomTransition(target?, options?) 返回原生实现版本标记。
  • getPluginVersion() 事件
  • navbarBack 当原生导航栏操作按钮被点击时触发。
  • navbarItemTap 当原生选项卡被选中时触发。
  • tabSelect 报告原生栏和安全区域内边距的变化。
  • safeAreaChanged
  • transitionStart 报告原生过渡边界。 transitionEnd 平台模型

UINavigationBar 。iOS 26及更高版本使用Liquid Glass行为;较旧版本使用原生半透明/材料fallbacks。 UITabBarAndroid使用AppCompat工具栏和Material底部导航栏,边缘到边缘放置。

该插件不创建一个native WebView per路由。版本1保留一个__CAPGO_KEEP_0__ WebView以实现桥梁稳定性,并让native拥有仅仅框架、条形视觉、选项卡选择Chrome、安全区域报告和过渡壳。

从@Capacitor/__CAPGO_KEEP_1__-native-navigation继续

Section titled “从@capgo/capacitor-native-navigation继续”

Section titled “Keep going from @capgo/capacitor-native-navigation”

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation @capgo/capacitor-native-navigation 使用@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Using @capgo/capacitor-native-navigation 为使用 @capgo/capacitor-native-navigation 原生能力 使用 @capgo/capacitor-live-activities 为使用 @capgo/capacitor-live-activities 原生能力 @capgo/capacitor-live-activities 为 @capgo/capacitor-live-activities 实现细节 使用 @capgo/capacitor-video-player 为使用 @capgo/capacitor-video-player 原生能力 @capgo/capacitor-video-player 为 @capgo/capacitor-video-player 实现细节