@ capgo/ 电容- 本地导航

🤖 建筑与AI编码代理? 安装 Capgo 技能 所以克劳德代码,代码,光标,副驾驶,或双子座CLI知道如何安装和使用 @capgo/capacitor-native-navigation 在您的电容应用程序中: npx skills add Cap-go/capgo-skills。然后问你的经纪人: 加入@capgo/capor-native-navigation到我的Capacitor app并把它接上。" 代理设置指南 • 妇女 主机磁共振

原生导航栏,标签栏,安全区域处理,以及Capacitor应用的WebView快照转换. 您的网页框架保持路由和页面渲染, 而此插件则拥有平台表面: 大标题下的搜索字段, 与起始、 中心或结尾一致的标签栏, 以及后排的侧边栏杆 .

iOS 27和iPhone Duo. 互联网档案馆的存檔,存档日期2013-12-02. 在iPhone Duo上,iOS将状态栏和系统制表栏移动到折叠外显示和景观上开放式显示上的一个垂直栏杆上. 开口肖像保持了水平条. Navbar 图标按钮加入该栏,标题保持水平. 后相或近相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 搜索可以是解开的按钮,突出动作保持被封,以及共享一个 group 变成一个扩张的控制。 曲线中心栏会留在底部. configure({ verticalBarBehavior: 'disabled' }) 为不应使用铁路的屏幕保留横向栏.

演示

应用	磁盘流	SVG 图标	样式

iOS 液态玻璃	机器人模糊	Android 水龙头流	曲线标签栏

Android的捕捉来自 缩写 在Android 16上:一个在卷轴上倒塌的大型导航栏标题,一个半透明本地制式标签栏和一个覆盖 CSS 的透明导航栏 backdrop-filter 模糊不清。 模糊不清.

iPhone 杜奥

被折叠了,在地貌中打开了,系统标签栏变成了一条垂直的铁路. 张开的肖像画保持水平栏. Split View将每个窗口的栏杆放入外缘. 铁路停留在相机的物理边缘上,因此语义边缘在地貌上走出后行走,可以在Split View和右到左的布局上走出后行走. 曲线中心栏会留在下方,而其摇篮会保持一圈环绕窗口拓宽时的按钮.

从导航栏的图标按钮 加入铁路。 文本标题保持水平, 因此需要背控 display: 'icon' (或 role: 'close'在它坐到铁路上方之前. dock: 'detached' 自己画个按钮. dock: 'prominent' 把它从溢出处取出. axis: 'vertical' 在栏杆上设置像Done这样的文字按钮。 共享的项目 group 崩溃到第一个项目,系统会扩展其余部分. search.placement: 'button' 是iOS 26中和后期iPhone Duo铁路上的一个脱开的搜索按钮. 一个水平导航器,Android,和Web保持了堆叠的字段. verticalBarCompression: 'preferItems' 铁路耗尽时保留导航按钮。 分行保持水平并清除铁路. 曲线等自定义的胶囊会留在底部,而中心按钮会保持一圈. configure({ verticalBarBehavior: 'disabled' }) 选择屏幕关闭并保留上下行。 选择 verticalBarBehavior 之后保留目前的选择. safeAreaChanged 报告 verticalBarEdge折叠 reservedRegions,以及最新的链条样本. verticalBarChanged 财务报告和审定财务报表 hingeChanged 火当这些变化.

await NativeNavigation.configure({ verticalBarBehavior: 'automatic' });

await NativeNavigation.setNavbar({
  title: 'Notes',
  verticalBarCompression: 'preferItems',
  backButton: { visible: true, title: 'Back', display: 'icon' },
  rightItems: [
    { id: 'done', title: 'Done', dock: 'prominent', axis: 'vertical' },
    { id: 'reply', title: 'Reply', icon: { ios: { sfSymbol: 'arrowshape.turn.up.left' } }, group: 'message' },
    { id: 'forward', title: 'Forward', icon: { ios: { sfSymbol: 'arrowshape.turn.up.right' } }, group: 'message' },
  ],
  search: { placement: 'button', placeholder: 'Search' },
});

.page {
  padding-inline-start: var(--cap-native-navigation-left);
  padding-inline-end: var(--cap-native-navigation-right);
}

--cap-native-navigation-division-x 财务报告和审定财务报表 --cap-native-navigation-division-width 标记折叠,以便网页布局可以围绕折叠分割。 该插件仍然使用一个WebView. 在一个没有栏杆的电话上,这些嵌入变量是 0px。 。 。 .

在iOS 27.1的iPhone Duo模拟器上被捕获.

折叠后,中间	打开, 中央	系统打开	折叠系统

铁路中带有导航控制功能的开放地貌. 后图标坐落在状态项目下,Done是一个突出的文本按钮,回复并转发共享一组,而搜索则是一个脱开的按钮. 系统标签停留在铁路下方.

导航行

导航栏下多层本地分行:上方为瞄准镜切换器,下方为分节芯片. 见 导航行。 。 。 .

iOS系统	机器人

拉来拉去

接地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取地取 页面滚动是否有效 window 或内根,例如 #app。 。 。 .

iOS系统	机器人

await NativeNavigation.setPullToRefresh({ enabled: true });
NativeNavigation.addListener('pullToRefresh', async () => {
  await reloadData();
  await NativeNavigation.endPullToRefresh();
});

特征

• 从 JavaScript 状态驱动本地上下导航标签 .
• 在导航栏下显示本地搜索域 setNavbar({ search })。它随大标题和报告而崩溃 navbarSearch。 。 。 .
• 将浮动标签栏与起站、起站、起站、起站、起站、起站、起站、起站、起站、起站、起站、起站、起站、起站、起站、起站.
• 使用系统拥有的iOS导航条,分页条,分页手势,和液晶玻璃渲染.
• 释放本地意图事件,例如 navbarBack, (中文(简体) ), navbarItemTap, (中文(简体) ), navbarSearch,以及 tabSelect。 。 。 .
• 启用本地条的可选Android液体玻璃式半透明表面( 与 CSS 连接) backdrop-filter 以示模糊.
• 抓取 WebView 的快照, 用于本地感的推, 后, 根, 标签, 并缩放转换 .
• 配置标签标签、所选图标、徽章、指示器、波纹、锡色和动态颜色.
• 写入 CSS inset 变量,这样网页内容就可以不被隐藏地滚动到本地栏后.
• 在iPhone Duo上,跟随系统垂直铁路:导航器项目加入,安全区域清除,屏幕可以选择退出.
• 在导航栏(镜像切换器外加分区标签)下堆放多级本地分区行 setNavbar({ segments })。 。 。 .
• 直接进入原生的牵引至再生(iOS上的系统自旋器和随机性, SwipeRefreshLayout 在Android上), 与 setPullToRefresh()。 。 。 .
• 隐藏导航栏和标签栏,同时打开一个网络模式、工作表或弹出符。 动画制表栏隐藏保留了iOS制表控制器和WebView.
• 与React,Vue,Angular,Svelte,Solid,香草JS合作,以及任何暴露了必须通航的路由器.

选择表面

如何适应

• 您的路由器仍然拥有路由状态和页面渲染功能.
• 该应用仍然使用一款全屏WebView.
• 图标必须是SVG字符串,SF符号等可序列描述符,或者本地资源名.

模具、床单和弹珠

本地栏杆被绘制在WebView上方. 页面上的模式、工作表、对话框或弹出式(ion-modal, (中文(简体) ), ion-popover, (中文(简体) ), <dialog>,菜单)使WebView内部,所以它停留在导航栏和标签栏下.

隐藏覆盖将遇到的每个栏目, 然后在覆盖关闭时再次发送相同的选项 。 在可以堆叠时数起打开的上方. 内在的解雇必须让酒吧藏起来 而外层的覆被还在上面.

let overlayCount = 0;

let navbar = {
  title: 'Home',
  backButton: { visible: false },
};

let tabbar = {
  selectedId: 'home',
  tabs: [
    { id: 'home', title: 'Home' },
    { id: 'settings', title: 'Settings' },
  ],
};

async function suspendNativeChrome() {
  overlayCount += 1;
  if (overlayCount > 1) {
    return;
  }

  await NativeNavigation.setNavbar({ ...navbar, hidden: true });
  await NativeNavigation.setTabbar({ ...tabbar, hidden: true, animated: true });
}

async function resumeNativeChrome() {
  overlayCount = Math.max(0, overlayCount - 1);
  if (overlayCount > 0) {
    return;
  }

  await NativeNavigation.setNavbar({ ...navbar, hidden: false });
  await NativeNavigation.setTabbar({ ...tabbar, hidden: false, animated: true });
}

保留 navbar 财务报告和审定财务报表 tabbar 作为当前路径的选项,并更新到您已经拨打的同一位置 setNavbar 财务报告和审定财务报表 setTabbar调用 suspendNativeChrome() 在提交表前(ionModalWillPresent, (中文(简体) ), ionPopoverWillPresent,或者前面的行 dialog.showModal()) (中文(简体) ). 打电话 resumeNativeChrome() 在它消失之后ionModalDidDismiss, (中文(简体) ), ionPopoverDidDismiss对话框 close 活动).

setTabbar({ hidden: false }) 无 tabs 清除了酒吧。 传播您最后的选项并更改 hidden。 。 。 .

过 animated: true 在标签栏切换上 :

• iOS 26+系统 液态玻璃,当 shape 没有 curve 财务报告和审定财务报表 minimizeBehavior 没有 onScrollDown。插件调用 UITabBarController.setTabBarHidden(_:animated:)。标签控制器保留挂载,WebView保留在其中。 UIKit淡出酒吧. animated: false 将WebView移回桥上 桥在模式自己的动画中运行.
• 更早的iOS,曲线条,和最小相接相接胶囊. 酒吧会淡出200多米 继续挂起.
• Android (英语). 酒吧及其背景滑出并淡出超过200米,再离开布局. 让他们反弹 一会儿 setTabbar 在已可见的栏上,不会重放滑入.

导航屏的隐藏在iOS和Android上. animated 打开 setNavbar 适用于栏可见时的标题和按钮更改.

在调用解决时设置更新, 而 Tabbar 动画仍在运行中 :

• 隐藏的导航栏集 --cap-native-navigation-top 财务报告和审定财务报表 --cap-native-navbar-height 改为 0。滚动链接的导航栏更改等下一个 setNavbar 显示酒吧.
• 隐藏的 Android 标签栏集 --cap-native-navigation-bottom 财务报告和审定财务报表 --cap-native-tabbar-height 改为 0,所以上线可以使用栏所要离开的空间.
• 在iOS 26+系统标签栏上, --cap-native-tabbar-height 已经 0:WebView在分页内托管,在栏下不扩展. 动画隐藏保存 --cap-native-system-tabbar-height 标称栏高(栏外加家用指示器垫)。 一个非活化的隐藏也降低了这个值,因为标签控制器不见了.

远离酒吧的爆米花可以放他们出来 隐藏标题下菜单的导航栏,以及覆盖屏幕下方的工作表的标签栏.

configure({ enabled: false }) 把铬主机关掉 使用 hidden 为一个覆盖。 在网络上没有本地栏;同样的调用仍然更新 CSS 内置变量.

在此 WebView 中保留模式 。 封面为页面状态,由路由器负责.

兼容性

@capgo/capacitor-native-navigation 目标Capacitor 8和Node.js 22+. iOS 27被支持,包括iPhone Duo.

安装

您可以使用我们的 AI 辅助设置安装插件 。 使用以下命令将 Capgo 技能添加到您的 AI 工具 :

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

然后使用下列提示:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-native-navigation` plugin in my project.

如果您更喜欢手动设置,请通过运行以下命令来安装插件,并遵循下面的平台特定指令:

npm install @capgo/capacitor-native-navigation
npx cap sync

最小使用量

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
});

await NativeNavigation.setNavbar({
  title: 'Home',
  subtitle: 'Native chrome',
  transparent: true,
  scrollBehavior: 'both',
  scrollThreshold: 8,
  backButton: { visible: false },
  rightItems: [
    {
      id: 'compose',
      title: 'Compose',
      icon: {
        svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>',
      },
    },
  ],
});

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: {
    dynamic: true,
  },
  tabs: [
    {
      id: 'home',
      title: 'Home',
      icon: {
        svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 10v10h14V10"/></svg>',
      },
    },
    {
      id: 'settings',
      title: 'Settings',
      icon: {
        svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>',
      },
    },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.navigate(`/${id}`);
});

原生标签样式

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'selected',
  indicatorColor: '#0A84FF',
  rippleColor: '#330A84FF',
  badgeBackgroundColor: '#FF3B30',
  badgeTextColor: '#FFFFFF',
  colors: {
    dynamic: true,
    tint: '#0A84FF',
    inactiveTint: '#8E8E93',
  },
  tabs: [
    {
      id: 'home',
      title: 'Home',
      icon: { ios: { sfSymbol: 'house' }, android: { resource: 'ic_home' } },
      selectedIcon: { ios: { sfSymbol: 'house.fill' }, android: { resource: 'ic_home_filled' } },
    },
  ],
});

Android 液体玻璃公司

在Android 12+上,浮动标签栏使用 liquidGlass 当 setTabbar 省略 glass (通过) glass: { effect: 'none' } 给一个平坦的填充。 Android绘制出一个半透明无活模糊的锡:将WebView从原生代码中渲染出来以模糊其闪出页面或吞入放出. 对于模糊,设置一个元素 backdrop-filter: blur(...) 在条下方的页面中(浮动标签栏高64px,从侧面取出24px,最宽处为430px,10px上方为系统导航栏). 调色板 colors.background 阿尔法和 glass.surfaceAlpha (默认) 0.62一起来 当系统字体大小增加时,标签栏随标签行高而增长并报告 tabbarHeight / 底层插件与本地栏保持对齐 .

await NativeNavigation.configure({
  glass: {
    effect: 'liquidGlass',
    blurRadius: 18,
    surfaceAlpha: 0.62,
  },
});

await NativeNavigation.setTabbar({
  selectedId: 'home',
  tabs,
  colors: {
    background: '#F8FFFFFF',
  },
});

过渡流动

const transition = await NativeNavigation.beginTransition({ direction: 'forward' });

router.navigate('/detail');
await router.ready?.();

await NativeNavigation.setNavbar({
  title: 'Detail',
  backButton: { visible: true, title: 'Back' },
});

await NativeNavigation.finishTransition({
  id: transition.id,
  direction: 'forward',
});

使用@ capgo/ 电容器- 过渡

使用 @capgo/capacitor-native-navigation 用于本地导航、塔巴、安全区设置和本地意图事件。 使用 @capgo/capacitor-transitions 为WebView的页面堆放 在原生铬下.

npm install @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npx cap sync

应用程序启动时初始化两个软件包 :

import { NativeNavigation } from '@capgo/capacitor-native-navigation';
import '@capgo/capacitor-transitions';
import { initTransitions, setupRouterOutlet, setDirection } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });

const outlet = document.querySelector('cap-router-outlet');
if (outlet) {
  setupRouterOutlet(outlet, { platform: 'auto', swipeGesture: 'auto' });
}

await NativeNavigation.configure({
  contentInsetMode: 'css',
});

使过渡输出集中在页面上。 当原生铬拥有这些表面时,不要制作网眉或页脚:

<cap-router-outlet platform="auto" swipe-gesture="auto">
  <cap-page>
    <cap-content slot="content" fullscreen>
      <main class="page">Inbox content</main>
    </cap-content>
  </cap-page>
</cap-router-outlet>

.page {
  min-height: 100dvh;
  padding-top: var(--cap-native-navigation-top);
  padding-bottom: var(--cap-native-navigation-bottom);
}

从相同的路由器动作驱动两个软件包 :

async function openMessage(id: string) {
  setDirection('forward');
  await router.push(`/messages/${id}`);
  await NativeNavigation.setNavbar({
    title: 'Message',
    backButton: { visible: true, title: 'Inbox' },
  });
}

await NativeNavigation.addListener('navbarBack', () => {
  setDirection('back');
  router.back();
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  setDirection('root');
  router.push(`/${id}`);
});

每个导航选择一个动画层. 对于正常的路线推,让我们 @capgo/capacitor-transitions 激活 WebView 页面并更新本地条 setNavbar 编号 : setTabbar。用于共享元素或缩放路径 beginZoomTransition 编号 : finishZoomTransition 从此插件中跳过该导航的网页过渡 .

滚动驱动导航栏

每个屏幕上显示 setNavbar({ scrollBehavior: 'both' })。默认保留 none,因此现有的应用保持静态铬. 原生 iOS 和 Android 听滚动 window, (中文(简体) ), #app,并带有 data-cap-native-navigation-scroll启用 reportNavbarScroll() 仅用于自定义滚动根.

例应用路由 滚动页眉演示 (家用平板)显示长列表 scrollBehavior: 'both'. . . . . 向上滚动,在名单到达顶部之前把它带回.

安静	隐藏,然后揭示

导航栏搜索

过 search 改为 setNavbar 在栏下和任何分行上划出一个原生地。 该行为iOS上52pt和Android上52dp,而该高被包含在上位入位. iOS使用一个 UISearchBar。Android使用文本字段。 网页预览画出页面上方相同的字段.

hidesWhenCollapsed 默认为 true 当导航器是大标题时。 一旦标题倒塌,行高会变成0,而顶部的入位会随之收缩. 在网络预览中,当滚动行为崩溃了栏时,字段会与导航栏一起隐藏. 大标题倒塌本身是本土的.

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

let query = '';

const renderNavbar = () =>
  NativeNavigation.setNavbar({
    title: 'Settings',
    large: true,
    search: {
      placeholder: 'Search',
      text: query,
      hidesWhenCollapsed: true,
    },
  });

await NativeNavigation.addListener('navbarSearch', async ({ text, reason }) => {
  query = reason === 'cancel' ? '' : text;
  await renderNavbar();
});

await renderNavbar();

发送最新消息 text 下一个 setNavbar 因此,现场保持同步。 领域重点突出,但没有变化 text 独自一人 在iOS和Android上,省略 search 删除字段。 网络执行保留上一个 search 调用省略时的对象, 因此通过 search: { hidden: true } 在那里也清理干净.

实例 设置 选项卡使用此字段过滤一个集成列表,其外观控制在光、暗和系统方案之间切换演示。 这个 导航 游乐场有一个 搜索字段 切换.

iPhone 17模拟器, iOS 27.0.

标签栏位置和对齐

style.alignment 在水平边距内放置浮动栏: start, (中文(简体) ), center (默认),或 end。 。 。 . start 财务报告和审定财务报表 end 跟着 layoutDirection。曲线栏和侧边栏杆忽略了对齐.

style.placement 选择铬 :

• auto 让iOS 18 和新的决定。 压缩 iPhone 留在底部. iPad和iPhone Duo可以使用后导侧边栏.
• bottom 保持一个底条.
• sidebar 要求有轨电车。 在iOS 18上,以及更新的,即侧边栏模式下的系统标签栏,包括iOS 18至25上. iPad肖像显示该模式为带有侧边栏按钮的上标签栏. 当 UIKit 不提供侧边栏时,紧凑的 iPhone 可以留在下方 。 Android绘制了84dp的铁路,从后行边缘插入了12dp,从通航道下方开始. 导航栏保持全宽. 网页预览报告的是相同的左或右设置 .

curve 总是留在底部. sidebar 忽略 minimizeBehavior 并拖动到选择.

await NativeNavigation.setTabbar({
  tabs,
  selectedId: 'home',
  style: {
    shape: 'floating',
    alignment: 'end',
    placement: 'bottom',
  },
});

await NativeNavigation.setTabbar({
  tabs,
  selectedId: 'home',
  style: {
    shape: 'floating',
    placement: 'sidebar',
  },
});

实例 标签栏 游乐场和 设置 选项卡同时显示对齐和位置。 纸页内容 --cap-native-navigation-left 财务报告和审定财务报表 --cap-native-navigation-right 所以铁路不能覆盖它.

iPad Pro 11英寸模拟器 iOS 27.0. 对齐移动浮动胶囊;iOS 26系统标签栏不移动. 侧边栏设置使用UIKit上方的标签栏和侧边栏按钮.

Navbar 段行( 多级别上行)

过 segments 改为 setNavbar 在栏下堆放原生部分的行,例如上方的瞄准镜切换器和下方的分区标签。 行从上到下地画出,每行会给导航栏和所报道的套接字增加44pt(iOS)或48dp(Android). iOS 用途 UISegmentedControl / 玻璃药丸,Android使用材料分出按钮和过滤芯片.

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

const sections = {
  account: ['General', 'Notifications', 'Password', 'Two-factor'],
  organization: ['General', 'Members', 'Plans', 'Usage', 'Credits', 'Billing', 'Security', 'Webhooks'],
};
const selection = { scope: 'account', section: 'general' };

const renderNavbar = () =>
  NativeNavigation.setNavbar({
    title: 'Settings',
    segments: [
      {
        id: 'scope',
        selectedId: selection.scope,
        items: [
          { id: 'account', title: 'Account' },
          { id: 'organization', title: 'Organization' },
        ],
      },
      {
        id: 'section',
        style: 'scroll', // horizontally scrolling chips; `auto` picks `segmented` for up to 4 items
        selectedId: selection.section,
        items: sections[selection.scope].map((title) => ({ id: title.toLowerCase(), title })),
      },
    ],
  });

await NativeNavigation.addListener('navbarSegmentSelect', async ({ groupId, id }) => {
  if (groupId === 'scope') {
    selection.scope = id;
    selection.section = 'general'; // the second level depends on the first one
  } else {
    selection.section = id;
  }
  await renderNavbar();
});

await renderNavbar();

用户点击时选择本地移动, 但每次 setNavbar 调用应用 selectedId 再来一次 将选中的ID保存在您所在的状态, 并每隔一段时间传递 setNavbar 调用; 要拒绝选择, 请发送上一个 selectedId。接受的项目 icon, (中文(简体) ), accessibilityLabel 财务报告和审定财务报表 enabled 就像导航按钮 过 segments: [] 删除行.

例应用 导航 游乐场有一个 分行 切换与这个精确的设置.

缩放过渡

import { beginZoomTransition, finishZoomTransition } from '@capgo/capacitor-native-navigation';

const card = document.querySelector('[data-photo-card]');
if (card) {
  const transition = await beginZoomTransition(card, { cornerRadius: 18 });

  router.navigate('/photo/42');
  await router.ready?.();

  await finishZoomTransition(undefined, {
    id: transition.id,
    cornerRadius: 18,
  });
}

CSS 设置

与 contentInsetMode: 'css',插件在 document.documentElement数字 :

.app-scroll {
  height: 100dvh;
  overflow: auto;
  padding-top: calc(var(--cap-native-navigation-top) + 24px);
  padding-left: var(--cap-native-navigation-left);
  padding-right: var(--cap-native-navigation-right);
  scroll-padding-bottom: calc(var(--cap-native-navigation-bottom) + 24px);
}

.page {
  min-height: 100dvh;
  padding-bottom: calc(var(--cap-native-navigation-bottom) + 24px);
}

可用变量 :

• --cap-native-navigation-top
• --cap-native-navigation-right
• --cap-native-navigation-bottom
• --cap-native-navigation-left
• --cap-native-navbar-height
• --cap-native-tabbar-height
• --cap-native-system-tabbar-height (名义标签栏高;当 --cap-native-tabbar-height 实值 0 用于主机系统栏). 在iPhone Duo铁路上,这是铁路厚度,重叠是 --cap-native-navigation-left 或者说 --cap-native-navigation-right。 。 。 .
• --cap-native-navigation-vertical-bar-edge (单位:千美元)leading, (中文(简体) ), trailing,或为空)
• --cap-native-navigation-division-x 财务报告和审定财务报表 --cap-native-navigation-division-width (折叠,或 0px(中文(简体) )

Web 组件

软件包可以为框架不可知声明设置注册可选自定义元素 :

import { defineNativeNavigationElements } from '@capgo/capacitor-native-navigation';

defineNativeNavigationElements();

<cap-native-navigation-provider enabled="true" content-inset-mode="css"></cap-native-navigation-provider>

<cap-native-navbar
  title="Settings"
  large
  search='{"placeholder":"Search","hidesWhenCollapsed":true}'
></cap-native-navbar>

<cap-native-tabbar
  selected-id="home"
  tabs='[{"id":"home","title":"Home","icon":{"ios":{"sfSymbol":"house.fill"}}}]'
  tabbar-style='{"shape":"floating","alignment":"center","placement":"auto"}'
></cap-native-tabbar>

图标描述符

const icon = {
  svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/></svg>',
  width: 24,
  height: 24,
  template: true,
  src: 'shared_asset_name',
  ios: {
    svg: '<svg viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5"/></svg>',
    sfSymbol: 'house.fill',
    image: 'BundledAssetName',
  },
  android: {
    svg: '<svg viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5"/></svg>',
    resource: 'ic_menu_view',
    image: 'bundled_drawable_name',
  },
};

Inline SVG 支持Lucide 和 Feather等常见集使用的以图标为焦点的子集: path, (中文(简体) ), line, (中文(简体) ), polyline, (中文(简体) ), polygon, (中文(简体) ), circle,以及 rect。 SVG 默认作为模板图像提供,所以本地的锡克颜色可以在不捆绑平台资产的情况下重新显示.

平台说明

• iOS 使用 UIKit UINavigationBar, (中文(简体) ), UISearchBar, (中文(简体) ), UITabBar,以及 UITabBarController 因此系统拥有标签交互,液晶渲染,侧边栏放置于iOS 18+,以及安全区域行为.
• Android 使用 Appcompat 软件 Toolbar,该工具栏下的文本字段,以及本地标签表面。 侧杆布置是一条有后遗症的铁路. 导航栏保持全宽.
• Web 镜像 内置变量,搜索字段,侧边栏设置,浮边对齐,以及用于本地开发的事件.

示例应用

这个 example-app/ 文件夹是连接到 file:..。 。 。 .

cd example-app
npm install
npm run build
npx cap add ios
npx cap add android
npx cap sync

API 密码

• configure(...)
• setNavbar(...)
• reportNavbarScroll(...)
• setPullToRefresh(...)
• endPullToRefresh()
• setTabbar(...)
• beginTransition(...)
• finishTransition(...)
• getPluginVersion()
• addListener('navbarBack', ...)
• addListener('navbarItemTap', ...)
• addListener('navbarSearch', ...)
• addListener('navbarSegmentSelect', ...)
• addListener('tabSelect', ...)
• addListener('safeAreaChanged', ...)
• addListener('verticalBarChanged', ...)
• addListener('hingeChanged', ...)
• addListener('transitionStart', ...)
• addListener('transitionEnd', ...)
• addListener('pullToRefresh', ...)
• 接口
• 类型异名

框架-不可知 本土导航 铬 API.

配置(...)

configure(options?: NativeNavigationConfigureOptions | undefined) => Promise<NativeNavigationInsetsResult>

配置原生铬主机和内容内置行为.

回返情况: Promise<NativeNavigationInsetsResult>

设置Navbar(...)

setNavbar(options: NativeNavigationNavbarOptions) => Promise<NativeNavigationInsetsResult>

渲染或更新本土导航.

回返情况: Promise<NativeNavigationInsetsResult>

报告 NavbarScroll(...)

reportNavbarScroll(options: NativeNavigationNavbarScrollEvent) => Promise<void>

报告滚动样本 scrollBehavior。仅用于滚动根 尚未通过 setNavbar (单位:千美元)window, (中文(简体) ), #app,或 [data-cap-native-navigation-scroll]). iOS,Android,和网络倒置 启用滚动时自动安装这些听众.

设置 PullTrefresh (...)

setPullToRefresh(options: NativeNavigationPullToRefreshOptions) => Promise<void>

启用或禁用本地拉到新鲜的手势 。 听着 pullToRefresh,然后调用 endPullToRefresh() 隐藏 旋转器。 网络上没有.

自: 8.11.0 (中文(简体) )

结束PullTrefresh ()

endPullToRefresh() => Promise<void>

刷新完成后停止原生回旋器.

自: 8.11.0 (中文(简体) )

设置 Tab 栏(...)

setTabbar(options: NativeNavigationTabbarOptions) => Promise<NativeNavigationInsetsResult>

渲染或更新本地标签栏 .

回返情况: Promise<NativeNavigationInsetsResult>

开始转换(...)

beginTransition(options?: NativeNavigationBeginTransitionOptions | undefined) => Promise<NativeNavigationTransitionResult>

抓取当前 WebView 并准备本地转换 .

回返情况: Promise<NativeNavigationTransitionResult>

完成过渡(...)

finishTransition(options?: NativeNavigationFinishTransitionOptions | undefined) => Promise<NativeNavigationTransitionResult>

从抓取的"WebView快照"到当前"WebView"直播的动画.

回返情况: Promise<NativeNavigationTransitionResult>

获取 PluginVersion ()

getPluginVersion() => Promise<PluginVersionResult>

返回平台执行版本标记 .

回返情况: Promise<PluginVersionResult>

添加聆听器( “ 导航备份 ” )..

addListener(eventName: 'navbarBack', listenerFunc: (event: NativeNavigationBackEvent) => void) => Promise<PluginListenerHandle>

回返情况: Promise<PluginListenerHandle>

添加倾听器( “ 导航项目Tap ” ,...)

addListener(eventName: 'navbarItemTap', listenerFunc: (event: NativeNavigationBarItemTapEvent) => void) => Promise<PluginListenerHandle>

回返情况: Promise<PluginListenerHandle>

添加 listener('navbarSearch', ) , (...)

addListener(eventName: 'navbarSearch', listenerFunc: (event: NativeNavigationNavbarSearchEvent) => void) => Promise<PluginListenerHandle>

当导航器搜索字段改变时被发射.

回返情况: Promise<PluginListenerHandle>

自: 8.14.0 (中文(简体) )

添加倾听器( “ 导航组件选择 ” ,...)

addListener(eventName: 'navbarSegmentSelect', listenerFunc: (event: NativeNavigationNavbarSegmentSelectEvent) => void) => Promise<PluginListenerHandle>

当用户在 navbar 段行中选择项目时被解除 .

回返情况: Promise<PluginListenerHandle>

自: 8.13.0 (韩语)

添加收听器( 无法选择),..

addListener(eventName: 'tabSelect', listenerFunc: (event: NativeNavigationTabSelectEvent) => void) => Promise<PluginListenerHandle>

回返情况: Promise<PluginListenerHandle>

添加 listener( “ 安全区更改 ” ,...)

addListener(eventName: 'safeAreaChanged', listenerFunc: (event: NativeNavigationSafeAreaChangedEvent) => void) => Promise<PluginListenerHandle>

回返情况: Promise<PluginListenerHandle>

添加倾听器( “ 垂直Bar Changed ” ,...)

addListener(eventName: 'verticalBarChanged', listenerFunc: (event: NativeNavigationVerticalBarChangedEvent) => void) => Promise<PluginListenerHandle>

当iPhone Duo垂直铁路出现、消失或改变时被发射 边缘. safeAreaChanged 在每个插件更新时带相同的边缘.

回返情况: Promise<PluginListenerHandle>

自: 8.14.0 (中文(简体) )

添加倾听器( “ hinge Changed ” ,...)

addListener(eventName: 'hingeChanged', listenerFunc: (event: NativeNavigationHingeChangedEvent) => void) => Promise<PluginListenerHandle>

当 iPhone Duo 链条发生变化时, 或当 链条更新停止时, 解除 . 偏爱 hinge.status 结束 hinge.angle 当一个粗糙的姿势足够.

回返情况: Promise<PluginListenerHandle>

自: 8.14.0 (中文(简体) )

添加倾听器( “ 过渡开始 ” )..

addListener(eventName: 'transitionStart', listenerFunc: (event: NativeNavigationTransitionEvent) => void) => Promise<PluginListenerHandle>

回返情况: Promise<PluginListenerHandle>

添加倾听器( “ 过渡结束 ” )..

addListener(eventName: 'transitionEnd', listenerFunc: (event: NativeNavigationTransitionEvent) => void) => Promise<PluginListenerHandle>

回返情况: Promise<PluginListenerHandle>

添加倾听器( “ pill Torefresh' ,...)

addListener(eventName: 'pullToRefresh', listenerFunc: () => void) => Promise<PluginListenerHandle>

用户拉出刷新时被解除. 旋转器一直旋转到 endPullToRefresh() 名为.

回返情况: Promise<PluginListenerHandle>

自: 8.11.0 (中文(简体) )

接口

原生导航集

通过可能改变安全内容界限的方法返回.

原生导航集

被网络内容所曝光的套接字.

原生保留区

一个区域iOS保留在窗口内部,如折叠或被封入.

本地导航Hinge

iPhone Duo连接样本. angle 这是弧度.

本地导航配置选项

全局插件配置 .