选项卡和 BottomNavigation-NativeScript 的两个新组件

·

在 NativeScript 6 中，我们向核心模块套件引入了两个新的标签导航组件。它们被冠以“音调” BottomNavigation，Tabs并且是现有TabView组件的新的更好的替代品。现在，有了 6.1 版，它们终于脱离了 beta 版。

TabView选项卡底部导航架构

不久前，就已TabView报告的问题而言，我们将其确定为最有问题的组件之一。考虑到该组件对整个应用程序导航的重要性，我们想解决此问题。问题的范围从错误和使用困难到不受支持的方案和限制。一对一地挑选并不能很好地解决问题，我们采用了一种更全面的方法来找出问题所在。最终，我们决定进行彻底的重新设计，其中包括标记，样式和自定义的新方法。我们还从 Material Design 中获得启发，按功能将组件分开，因此，我们有两个组件来代替TabView：BottomNavigation和Tabs。

这两个新的更好，您应该TabView完全忘记。让我们看看为什么。

TIP

提示：一定要在最后检查自定义选项卡栏，以获取最大的冷却过载。

城镇中的新组成部分

首先，我必须解释为什么我们决定选择两个单独的组成部分。的BottomNavigation和Tabs部件通过功能分离。如前所述，我们从 Material Design 中获得了很大的启发，因此您可以查看有关 BottomNavigation 和 Tabs 使用的相应文章，以获取有关设计方面的一些解释和示例。下表显示了两者之间的行为差 ​​ 异：

	标签	底部导航
语义的	中级导航	高级导航
用法	具有通用功能的无限选项卡	3 至 5 个具有不同功能的标签
转场	幻灯片过渡	没有过渡
手势	滑动手势	无手势
预装	两侧至少 1	没有预加载
位置	顶部/底部	底部

如您所见，这是两个具有不同行为的不同组件，并且都有其用例。BottomNavigation对于单独的选项卡没有共享上下文的高级导航，请使用。Tabs当您要创建某种寻呼机以在具有相同上下文的项目之间浏览时，请使用该组件。该TabView组件的问题之一是，它试图以一种怪异的方式将这两种行为组合在一起-对于 Android，它实际上具有该Tabs行为，而对于 iOS，它却具有BottomNavigation一种行为。从技术上讲，它提供了带有选项卡的导航，但实际上，它很难使用和弄清楚，并且也很难维护。

具有两个组件的另一个好处是，您现在可以将它们组合在一起- Tabs 在顶部和 BottomNavigation 底部。以前这是不可能或很难实现的。

选项卡和底部导航组合

TIP

查看带有选项卡和 BottomNavigation 组合的 Playground 示例

如您所见，这里有一些样式。让我们看看现在是如何完成的。

一切都与标记有关

新组件还带有新标记。事实证明，标记对于 CSS 样式非常重要。为了充分利用它，我们必须为要设置样式的每个可见单元创建组件表示形式。有三个新的子组件BottomNavigation和Tabs。

• TabStrip-代表整个选项卡。可以包含TabStripItems。
• TabStripItem-代表一个标签。可以包含两个子组件- Image和Label-代表选项卡的标题和图标。
• TabContentItem-表示在选择各个选项卡时导航到的每个选项卡的内容部分。可以包含任何布局组件或新的选项卡组件。
  这是带有BottomNavigation组件的新标记的示例。它与那个相同Tabs。

<BottomNavigation>
    <TabStrip>
        <TabStripItem>
            <Label text="Title"></Label>
            <Image src="~/icon.png"></Image>
        </TabStripItem>
        <TabStripItem>
            <Label text="Title"></Label>
            <Image src="~/icon.png"></Image>
        </TabStripItem>
    </TabStrip>
    <TabContentItem>
        <GridLayout>
            <Label text="Content"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Content"></Label>
        </GridLayout>
    </TabContentItem>
</BottomNavigation>

这个标记声明的另一个好处是，现在跨框架它都是相同的。不需要指令等。当然，绑定因框架而异。

造型的新方式

这个新的标记非常适合 CSS 样式，我们现在可以忘掉诸如怪异的属性，selected-tab-text-color并使用常规的 CSS 选择器和伪选择器。您现在可以分别设置每个标签的样式。

标签样式

TIP

使用标签样式查看 Playground 示例

诚然，使用具有不同对比色的标签不是最佳的设计决定，但我将把设计留给您。重要的是，现在有可能实现更多目标。

如您所见，这些TabStripItem组件还支持:active伪选择器，该伪选择器允许您在其选定状态下对它们进行样式设置。

当前，只有四个受支持的 CSS 属性来实现与TabView组件的功能奇偶校验。

• color
• background-color
• font （连同各个属性）
• text-transform

TIP

!! iOS 限制!! 您无法 TabStripItem 在 iOS Tabs 组件上为单个组件设置样式。您可以在 TabStrip 组件上一起设置样式。

字体图标

产生图标资源从来都不是应用程序开发的有趣部分。TabStripItem现在，其标题和图标在标记中以Image和Label组件分开，这一事实意味着我们现在可以启用字体图标支持。您甚至可以设置其颜色样式，这也意味着活动状态。可能有人会说，此功能恰逢其时，就像暗模式即将来临一样，您不得不产生更多的图标资源。这是一个简单的示例：

选项卡字体图标

TIP

查看带有 Tabs 字体图标的游乐场示例

也有新活动

不幸的陷阱之一TabView是，您无法轻松实现选项卡重新选择的模式。也就是说，如果您在某个选项卡内容中执行了某些操作，然后再次选择了该选项卡，则需要刷新该选项卡的内容。我们也考虑过这一点，为了让您处理此类情况，我们公开了新的单个事件。

• TabStrip暴露一个itemTap事件，当您点击任何选项卡时将触发该事件。
• TabStripItem公开一个tap事件，当您仅点击该特殊选项卡时将触发该事件。

这意味着我们现在可以轻松地制作图案。

选项卡重新选择刷新

TIP

使用“ 选项卡重新选择刷新”查看 Playground 示例

自定义标签栏

以上一切都很好，并且已经对该TabView组件进行了巨大的改进，但是我们希望为您提供执行任何操作的自由。NativeScript 的布局系统以及 CSS 和动画使您可以创建所需的任何选项卡栏。而且，如果您可以创建它，那么我们没有理由不让您在这些选项卡导航组件中使用它。

要使用自定义标签栏，只需TabStrip从标签导航组件中省略该组件即可。现在的行为是相同的，但是没有选项卡栏，您可以使用常规的 NativeScript 合成添加自己的内容。您可以使用selectedIndex标签导航组件的 API 通过自定义标签栏来控制它们。

有一个非常酷的摇篮选项卡实现，对@ Williamjuan27 表示敬意，我一直想尝试使用新组件。所以就到这里。

自定义底座标签栏

TIP

查看“ 自定义底座”选项卡栏的游乐场示例

还值得一提的是，已经有一些标签栏实现作为插件提供。您可以在 NativeScript Marketplace 中找到它们！

下一步是什么

我们有两件事想做，但最终没有这个版本的时间和资源。

• 结合 -无论是TabView组件和新的BottomNavigation和Tabs真的不支持绑定。动态设置选项卡和内容必须重新创建不能提供良好 UX 的组件。
• 公开BottomNavigationBar和TabsBar-我们想为您提供本机的标签栏实现，以便您可以实现自己的自定义标签导航，并且仍然使用标签栏。
  我们希望我们可以在将来的版本中添加它们。

结论

在各种方面，BottomNavigation和Tabs组件都是组件的更好版本TabView。如果您的应用程序中有旧版本，请毫不犹豫地将其替换为合适的新版本。更好的是，创建自己的自定义标签栏，并将您的应用程序提升到一个新的水平。

最终，尽情享受，别忘了分享您创建的超赞应 ​​ 用程序！