跳过内容

@capgo/capacitor-native-navigation

在 JavaScript 保持路由、内容、图标、标签和状态栏的控制下,原生地渲染 iOS 和 Android 导航栏。

原生浏览器

使用原生 UI 绘制顶部导航栏和底部选项卡栏,而不是 web 组件。

web 所有路由

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

序列化图标

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

原生过渡壳

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

缩放路线

打开卡片、网格和媒体详细路线,共享元素样式原生缩放几何

原生 shell点击流
原生导航动画演示,显示原生导航栏、标签页和 WebView 内容原生导航点击流动画演示,显示标签页选择、推送过渡和原生后退
  • configure(options?) 使原生 Chrome 主机启用并控制内容边距
  • setNavbar(options) 更新原生标题、副标题、返回按钮、按钮、颜色、透明度和可见性。
  • setTabbar(options) 更新选项卡、选中选项卡、徽章、标签、图标、颜色和可见性。
  • beginTransition(options?) 捕获 WebView 发出的 JavaScript 路由变化之前的 WebView。
  • finishTransition(options?) 从捕获的快照到路由内容准备就绪后,动画到活跃 WebView。
  • beginZoomTransition(target, options?)finishZoomTransition(target?, options?) 用于元素或矩形的 JavaScript zoom 转换助手。
  • getPluginVersion() 返回原生实现版本标记。
  • navbarBack 当原生返回手柄被点击时触发。
  • navbarItemTap 当原生导航栏操作按钮被点击时触发。
  • tabSelect 当原生选项卡被选中时触发。
  • safeAreaChanged native bar 和安全区域 inset 变化.
  • transitionStarttransitionEnd 报告 native 过渡边界.

平台模型

平台模型

iOS 使用 UINavigationBarUITabBar. 在 iOS 26 和更高版本中,插件让系统渲染 Liquid Glass 行为;旧版本使用 native 透明/材料 fallbacks.

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

插件不创建一个 native WebView per 路由。版本 1 保持一个 Capacitor WebView 以便桥梁稳定,让 native 只拥有框架,条形视觉,标签选择.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 for the native capability in Using @capgo/capacitor-video-player, and 使用 @capgo/capacitor-video-player 为 @capgo/capacitor-视频播放器 的实现细节。