Skip to content

原生功能和容器选择 ​

尝试 Fieldnotes,集成的原生示例,在一个应用程序中跟踪 抽屉导航、搜索、共享操作、导航守卫 和模态结果。

从您的应用程序需要显示的内容开始,然后选择原生所有者。 NativeScript 提供页眉和控件;路由器提供路由标识、导航守卫、结果以及原生 导航栈 之间的协调。该应用程序提供内容、业务操作和持久性策略。

本页描述了 0.1.0-rc.3,与之前的 0.1.0-rc.2 基线进行了比较。下面的“现有”是指在rc.2中已经可用; “rc.3”标识需要新候选或本地存储库构建的添加内容。该软件包仍然是候选版本,而不是 1.0 的稳定性承诺。详细指南仍然是 API 参考。

查找功能 ​

下面的示例是存储库路径。按照演示设置;在运行选择加入示例之前构建包。 兼容性表 记录依赖性基线。

需要所有者/可用性平台边界指南和可运行源
原生页眉和页面按钮Core ActionBar / ActionItem; iOS 上现有UIKit 导航栏,Android 上的原生工具栏原生栏; Inbox.vue,正常演示
折叠大标题Core ActionBar iosLargeTitle;现有的iOS 具有原生滚动内容。标准 Android ActionBar 没有等效的折叠 Material 应用栏策略Native 栏;正常演示收件箱
原生页面搜索路由器 useNativeSearch;现有iOS UISearchController; Android SearchView 在现有 ActionBar 标题视图中搜索所有权;正常演示收件箱
项目上下文操作和预览路由器菜单集成、应用程序回调;现有iOS 原生预览/菜单; Android 具有显式打开操作的原生弹出窗口上下文菜单; MessagePreview.vue,正常演示收件箱
共享标头/菜单/键盘操作路由器 usePageActions / PageActionItem; rc.3跨受支持的原生表面共享资格/忙/错误处理;应用程序仍执行保存/共享/删除Page 操作; actions-app.ts,--env.actionsTest
键盘命令路由器注册和原生密钥调度;现有的物理键盘/平台快捷方式行为不同Keyboard; navigation-commands.ts,正常演示
抽屉/持久自定义菜单路由器 RouterDrawerAndroid 覆盖现有; iOS 叠加和自适应/永久呈现 rc.3Drawer; adaptivedrawer-app.ts,--env.adaptivedrawerTest
独立选项卡历史记录 / iPad 选项卡侧边栏具有原生宿主的路由器 RouterTabs; iOS 18+ 上现有的UIKit 选项卡/侧边栏; Android 材料底部导航/导轨,带有记录的 Core 后备Tabs; App.vue,正常演示
自适应列表/详细信息路由器 RouterSplitView,单独的原生框架;现有跨平台,包括可选的Android折叠几何形状Split;正常演示收件箱
UIKit 控制分列路由器 RouterUIKitSplitView;实验性,现有iOS 18+;拥有窗口根目录。不是 抽屉导航 或选项卡UIKit split 的子项; uikitsplit-app.ts,--env.uikitsplitTest
原生模态和类型化结果路由器路由表示,原生模态主机;现有的内部历史是独立的;工作表行为/依赖性不同Modals; Compose.vue,正常演示
缩放/共享元素/预测 BackUIKit/Core 过渡和路由器协调;现有的iOS 变焦需要 18+ 和运行时 API; Android 进度需要14+。无通用交互控制器Transitions、所有权限制; Transitions.vue,正常演示中的设置
导航诊断路由器选择加入收集器/导出;现存的。浏览器查看器 rc.3逻辑/原生状态和计时,而不是原生堆/FPS 或实时时间旅行Diagnostics、viewer; Diagnostics.vue,正常演示中的设置
多个原生窗口/娱乐每个原生窗口一个路由器;现有的已发布的依赖关系基线和特定于平台的会话/任务重建测试Windows; windows-app.ts,--env.windowsTest

标志从 demo 运行,例如 ns run ios --env.actionsTest 或 ns run android --env.actionsTest。仅 iOS 的灯具需要 iOS。大标题、标题、搜索和菜单不需要新的“原生导航标题”子系统。

选择一个容器 ​

容器它拥有什么当 时使用它
RouterView一个原生 Frame 及其路线 导航栈您需要普通的推送/返回导航。
RouterTabs + RouterTab目标选择和每个选项卡中安装的框架目标应保留独立的历史记录。 sidebar 更改了 UIKit 的选项卡呈现方式;它不会创建通用的 抽屉导航。
RouterDrawer围绕已安装内容的菜单;没有自己的路线历史记录您需要自定义导航内容或自适应持久菜单。它的按钮选择是否按下、打开链接或重置 导航栈。
RouterSplitView一种基于 Frame 的列表/详细信息排列及其改编一个逻辑流应扩展为窗格。它可以是 抽屉导航 内容或位于选项卡内。
RouterUIKitSplitView窗口的原生 UISplitViewController 和列您明确想要 UIKit 列/根所有权并接受实验/平台限制。

永久的 抽屉导航、UIKit 的选项卡侧边栏和 UIKit 拆分列可能看起来都像侧边栏。他们的历史和控制者所有权不同;根据所有权进行选择,而不仅仅是外表。

组成具有独立目的地的 抽屉导航 ​

保持已安装的容器和名为 Frames 的状态。调整 抽屉导航 的 presentation,而不是用 v-if 切换整个键控树:

vue
<RouterDrawer ref="drawer" presentation="auto" :breakpoint="840">
  <template #drawer>
    <StackLayout>
      <Button text="Inbox" @tap="router.openLink('/')" />
      <Button text="Settings" @tap="router.openLink('/settings')" />
    </StackLayout>
  </template>
  <RouterTabs>
    <RouterTab name="inbox" title="Inbox">
      <RouterView name="inbox" />
    </RouterTab>
    <RouterTab name="settings" title="Settings">
      <RouterView name="settings" initial="/settings" />
    </RouterTab>
  </RouterTabs>
</RouterDrawer>

该片段属于与路由器一起安装的应用程序。配置links.frame为/settings选择settings,否则选择inbox; 、抽屉导航 导轨、 和 可运行的 抽屉导航 夹具 提供完整的设置。 openLink 选择所属目的地及其 导航栈。成功导航会关闭叠加层 抽屉导航;被拒绝的 导航守卫 使其保持打开状态。选择目的地并不是隐式历史重置。

不支持的组合: <RouterDrawer><RouterUIKitSplitView /></RouterDrawer> 要求两个容器拥有不兼容的原生根。在抽屉导航内部使用RouterSplitView,或者将RouterUIKitSplitView作为窗口根并在那里设计其列。不要重新安装 RouterView 来模拟转换;这样做会丢弃其原生历史和页面标识。

状态、焦点和可及性 ​

保留的 Page 保持其 Vue 状态,而另一页覆盖它。 usePageState 在进程死亡后选择小可串行化状态进行恢复;它不保留承诺或原生对象。搜索查询所有权属于应用程序,搜索激活必须针对当前符合条件的页面。 Page actions 也拒绝被覆盖、不活跃或已资源清理所有者的执行。

对 抽屉导航 目的地使用带有清晰辅助功能标签的原生按钮,保留菜单/Back 来替代手势,并使用 navigation focus 声明焦点目标。荣誉减少运动。自动原生层次结构检查并不是语音 VoiceOver/TalkBack 焦点的证据。每个链接的验证报告都说明了其局限性。

建议不发货能力 ​

交互式过渡调查 提出了边界,而不是新的通用 API 或 Jolt 集成。 Core 拥有的 Android 预览版 需要未发布的固定候选者; Core 9.1.3 回落。本概述不承诺折叠 Material Android 应用栏、实时诊断传输和任意自定义主机手势奇偶校验。

基于 MIT 许可证发布。