使用 NativeScript 模板搭建您的下一个移动应用

“条条大路通罗马，挖钱的方法也多种多样。”
- Seba Smith - 《掘金者》，1840年。

“给巴哥犬穿衣服的方式多种多样，设计应用导航的方式也多种多样。”
- Sebastian Witalec - NativeScript 博客，2017年。

dressed-pug

为您的应用选择合适的导航模型非常重要。根据屏幕数量及其关系，您可以选择标签导航或抽屉导航，甚至两者结合使用。但是，选择您想要做什么只是硬币的一面。

硬币的另一面是实际的实现。问题在于，有很多不同的方法可以

安排您的文件夹结构，
组织 CSS 样式机制，
设置导航过程，
并处理许多其他挑战。

在查看我们多年来使用 NativeScript 创建的一些项目后，我们意识到每个开发人员都有自己关于如何“给他们的巴哥犬穿衣服”的想法。

这就是我们组建“启动套件”团队的原因。他们的任务是为 NativeScript 项目提出模板。他们花费了一些时间研究各种选项并分析常见场景，权衡不同技术的利弊。因此，他们创建了一组 NativeScript 项目模板。每个项目都遵循一致的结构，每个项目都遵循行业最佳实践（如 Angular 样式指南），并且每个项目都是开始全新 NativeScript 项目的绝佳起点。

您需要做的只是运行

tns create app-name --template tns-template-name-here

请注意，本文基于 NativeScript 3.1 的模板，这些模板可能会随着时间的推移而发展，某些内容可能会发生变化。您无法阻止进步 :)

模板

模板分为 3 类

标签导航
抽屉导航
主从

它们各有 3 种变体

{N} Core 使用 JavaScript
{N} Core 使用 TypeScript - 后缀为 -ts
{N} Angular - 后缀为 -ng

即使每个模板都非常不同，它们仍然有一些共同点。

样式

在项目的根目录下，我们有

_app-variables.scss - 包含每个组件样式导入的全局 SASS 变量。
app.scss - 全局通用样式表。这些样式规则适用于 Android 和 iOS。
platform.android.scss - 全局 Android 样式表。这些样式规则仅适用于 Android。
platform.ios.scss - 全局 iOS 样式表。这些样式规则仅适用于 iOS。

_app-variables.scss 样式表对于每个模板都完全相同。在这里，您可以定义应用程序的品牌颜色。如果您需要使用不同的模板但相同的品牌颜色构建多个应用程序，则只需在所有项目中同步 _app-variables.scss 即可。

大多数 UI 元素使用 $accent-dark 和 $accent-light 变量，因此这可能是您更新应用程序配色方案的首选步骤。

Font Awesome

为了添加美观的基于字体的图标，每个模板都已配置了 FontAwesome。

您需要做的就是在组件样式中添加一个 fa 类，然后提供所需图标的 Unicode 值。例如，以下标签将显示如下

<Label class="fa h1" text="I like &#xf2cd; more than &#xf2cc;"></Label>

FontAwesome-bath-shower

如您可能猜到的， 是浴缸， 是淋浴。

以下是所有 Font Awesome 图标的备忘单

标签导航

tab-naviagation-android tab-naviagation-ios

这是最简单的模板之一，其中每个页面都显示在其自己的标签视图中。开箱即用，我们有 5 个标签：home、browse、search、featured 和 settings。每个标签都相当空，但模板对您开放，您可以将其更改为令人惊叹的内容。

如何创建

要使用 {N} Core JavaScript 模板，请运行
tns create app-name --template tns-template-tab-navigation

要使用 {N} Core TypeScript 模板，请运行
tns create app-name --template tns-template-tab-navigation-ts

要使用 Angular 模板，请运行
tns create app-name --template tns-template-tab-navigation-ng

使其成为您自己的

此模板的所有魔力都包含在 tabs 文件夹中，该文件夹包含标签页面组件和每个标签视图的文件夹。

可用标签的列表位于标签视图文件中，根据项目类型，它可以是 tabs-page.xml 或 tabs.component.html（Angular）。基本上，标签页面包含一个 TabView 组件，该组件为我们要显示的每个页面都提供了一个标签项。

要向任何现有标签视图添加内容，只需转到其文件夹并在那里进行所有更改。

要添加新标签，您需要在 tabs 文件夹中创建一个新组件（就像其他组件一样），然后将标签项添加到 TabView 中。

Github 链接

使用 {N} Core 的自定义 UI 组件

如果您使用的是 NativeScript Core，那么可能有一件事您尚未意识到，这对于理解 tabs-page.xml 中发生的事情很重要。这就是我们如何引入外部 UI 组件。例如，让我们看一下 Browse 组件。我们知道它位于 /tab/browse 文件夹中，包含组件的文件称为 BrowseView。因此，要将其添加到 tabs-view 中，我们需要

以 xmlns:namespace="folderurl" 格式向 <Page> 添加引用
xmlns:browse="/tabs/browse"
以 <namespace:filename /> 格式添加组件
<browse:BrowseView />

抽屉导航

drawer-naviagation-android drawer-naviagation-ios

抽屉模板使用侧边抽屉进行导航。您可以通过按下汉堡图标（左上角）或从屏幕左侧边缘向右拖动来调出侧边抽屉。

就像标签模板一样，我们可以导航到 5 个页面：home、browse、search、featured 和 settings。

如何创建

要使用 {N} Core JavaScript 模板，请运行
tns create app-name --template tns-template-drawer-navigation

要使用 {N} Core TypeScript 模板，请运行
tns create app-name --template tns-template-drawer-navigation-ts

要使用 Angular 模板，请运行
tns create app-name --template tns-template-drawer-navigation-ng

使其成为您自己的 - {N} Core

要向导航添加新页面，只需转到 shared/my-drawer/MyDrawer-view-model。视图模型包含一个 导航项 数组，每个数组由以下字段组成

title - 显示在抽屉中的文本
icon - 标题旁边的图标 - 此处使用 FontAwesome 图标
name - 导航项特定的 CSS 类 - 以下将详细介绍
route - 此项应导航到的页面的位置
isSelected - 用于检查当前项是否与当前页面相同的表达式

以下是一个示例

{
  title: "Featured",
  name: "featured",
  route: "featured/featured-page",
  icon: "\uf005",
  isSelected: selectedPage === "Featured"
},

使其成为您自己的 - {N} Angular

要向导航添加新页面，只需转到 shared/my-drawer/my-drawer.component。组件包含一个 导航项 数组，每个数组由以下字段组成

title - 显示在抽屉中的文本
icon - 标题旁边的图标 - 此处使用 FontAwesome 图标
name - 导航项特定的 CSS 类 - 只需向 app.scss 添加一个与您要使用的样式匹配的 CSS 类即可
route - 在 app-routing.module.ts 中定义的导航路径

以下是一个示例

{
  title: "Featured",
  name: "featured",
  route: "/featured",
  icon: "\uf005"
},

导航项特定样式

默认情况下，侧边栏中的所有项目的外观都相同，但模板提供了一种简洁的机制来为每个项目设置样式。

一切从您在 ItemTemplate 中提供的 name 属性开始

{
  title: "ABC",
  name: "abc",
  ...
}

我们可以获取 abc 并向我们的 CSS 添加其他类，这些类仅适用于 abc

默认 - sidedrawer-list-item-abc，
选中时 - sidedrawer-list-item-abc selected

要使用它，您只需将其他样式添加到抽屉的 CSS 文件（_MyDrawer.scss（Core）或 _my-drawer.component.scss（Angular））中的 .sidedrawer-list-item 类即可。

.sidedrawer-list-item {
  // current css
...
  
  .sidedrawer-list-item-abc {
    background-color: black;
    Label {
      color: yellow;
    }
        
    &.selected {
    background-color: gray;
      Label {
        color: red;
      }
    }
  }
}