返回博客首页
← 所有文章

抢先体验新的 NativeScript 核心主题

2019 年 9 月 10 日 — 作者：TJ VanToll

随着NativeScript 6.0 版本的发布，我们宣布了 NativeScript 核心主题的新测试版，其外观如下所示。

theme-ios

在本文中，我们将深入了解新的主题，包括发生了哪些变化以及如何立即亲自试用新主题。让我们从了解如何开始使用开始。

升级到新主题

新的 NativeScript 主题已作为 2.x 版本发布到 npm，您可以通过运行 tns plugin update 命令将任何现有应用更改为使用新主题。

tns plugin update nativescript-theme-core

注意：由于 2.0 主题仍处于测试阶段，因此所有 NativeScript 应用模板默认仍使用 1.x 版本的主题。因此，如果您今天启动一个新的 NativeScript 应用，您仍然需要运行 tns plugin update 来试用更新后的主题。

NativeScript 2.0 主题利用了我们在 NativeScript 6.1 中添加的一些全局类名。因此，如果您使用的是早于 6.1 的 NativeScript 版本，则还需要将以下代码行添加到您的应用中，这将负责手动添加相应的类名。

import "nativescript-theme-core";

注意：如果您使用的是 NativeScript Core 或 NativeScript-Vue 应用，请将上述代码添加到您的 app.js 或 app.ts 文件中；如果您使用的是 NativeScript Angular，请将其添加到您的 main.ts 文件中。

以下是现在可用于您的应用的类名列表。主题利用这些类名进行样式设置，您可能还会发现这些类名对您自己的自定义样式很有用。

  • ns-root
  • ns-ios：仅在 iOS 上显示
  • ns-android：仅在 Android 上显示
  • ns-phone：当您的应用在手机（而不是平板电脑）上运行时显示。
  • ns-tablet：当您的应用在平板电脑（而不是手机）上运行时显示。
  • ns-portrait：当您的应用以纵向模式运行时显示。
  • ns-landscape：当您的应用以横向模式运行时显示。

提示：您还可以使用一些新的 CSS 变量在您的自定义 CSS 中。

您需要进行的最后一次更改才能完成更新到新主题。要进行此更改，请打开您的 app.css 文件并找到您当前的主题导入，它看起来类似于以下内容。

@import '~nativescript-theme-core/css/<skin-name>.css';

将该代码行替换为以下导入。

@import "~nativescript-theme-core/css/core.css";
@import "~nativescript-theme-core/css/blue.css";

注意：如果您使用的是 SASS，则您的导入将改为 @import "~nativescript-theme-core/core"; 和 @import "~nativescript-theme-core/blue";。

第二个文件（例如 blue.css）决定了您应用的配色方案。您必须包含配色方案才能使主题正常工作，并且您可以从以下选项中进行选择：aqua.css、blue.css、brown.css、forest.css、grey.css、lemon.css、lime.css、orange.css、purple.css、ruby.css 或 sky.css。

如果您正在寻找快速尝试颜色选项的方法，则NativeScript 主题的 GitHub 存储库包含一个演示应用，使您可以轻松地测试您的选择。您可以通过在终端或命令提示符中执行以下命令来下载并运行此演示。

git clone https://github.com/NativeScript/theme.git

cd theme

tns run android

-- or --

tns run ios

应用启动并运行后，点击右上角的“主题”按钮以尝试不同的外观。

themes

注意：我们稍后将介绍如何在上面 GIF 中启用材质主题和暗模式。

完成这些步骤后，您现在应该已经启动并运行了新主题，因此接下来让我们看看您可以尝试的更改和新功能。

提示：您也可以在 NativeScript Playground 中试用新主题。使用这些示例作为起点，因为它们已经安装了新主题并准备就绪。

即插即用

新的核心主题的工作方式有一个重大更新，我认为首先查看一些代码最容易理解。

<!-- Before -->
<Button text="My Button" class="btn"></Button>

<!-- After -->
<Button text="My Button"></Button>

以前，NativeScript 主题要求您明确提供一个类名来启用主题样式，例如 <Button> 组件的 btn 类名。

这不再需要，并且所有 NativeScript 组件都获得一组基本样式，而无需任何类名。例如，以下是使用新主题和蓝色配色方案的 NativeScript 应用中默认按钮的外观。
android-button-3ios-button-3

许多其他主题类名已缩短，使其更易于使用。例如，以下是使用各种 NativeScript 按钮类名的前后对比。

<!-- Before -->
<Button text="Normal Button" class="btn"></Button>
<Button text="Primary Button" class="btn btn-primary"></Button>
<Button text="Outline Button" class="btn btn-outline"></Button>
<Button text="Rounded Button" class="btn btn-primary btn-rounded-lg"></Button>
<Button text="Another Rounded Button" class="btn btn-outline btn-rounded-sm"></Button>

<!-- After -->
<Button text="Normal Button"></Button>
<Button text="Primary Button" class="-primary"></Button>
<Button text="Outline Button" class="-outline"></Button>
<Button text="Rounded Button" class="-primary -rounded-lg"></Button>
<Button text="Another Rounded Button" class="-outline -rounded-sm"></Button>

以下是这些按钮在使用蓝色配色方案的同一 NativeScript 应用中的外观。
android-button-options-3ios-button-options-4

在我们继续之前，有一点非常重要：NativeScript 2.0 主题通过其他 CSS 文件提供与 1.0 主题类名的完全向后兼容性。因此，您可以更新到新主题，而无需更改所有类名，只需将以下导入添加到您的 app.css 文件中。

@import "~nativescript-theme-core/core.compat";
@import "~nativescript-theme-core/<your-color-scheme-name>.compat";

例如，使用兼容模式的蓝色配色方案的应用的完整 app.css 文件应如下所示。

@import "~nativescript-theme-core/css/core.compat.css";
@import "~nativescript-theme-core/css/blue.compat.css";

如果您希望同时使用两组选择器，例如，您希望 <Button class="-primary"> 和 <Button class="btn btn-primary"> 都能工作，则需要在您的 app.css 中包含两组 CSS 文件，如下所示。

@import "~nativescript-theme-core/css/core.css";
@import "~nativescript-theme-core/css/core.compat.css";
@import "~nativescript-theme-core/css/blue.css";
@import "~nativescript-theme-core/css/blue.compat.css";

兼容性 CSS 文件将帮助您转换应用，但要完成更新，您可能还需要进行一些其他 CSS 更改。例如，假设您在应用中使用此按钮。

<Button text="Confirm your choice"></Button>

由于此按钮未使用 btn 类名，因此 NativeScript 1.0 主题未对其进行样式设置，但一旦您更新到 NativeScript 2.0 主题，它将被设置样式；因此，您可能需要编写一些自定义 CSS 以确保这些类型的组件在更新后的应用中继续保持正确的外观。

在完成这一重大更改后，让我们看看新主题提供的一些很酷的新功能。

暗模式

Twitter 有暗模式，iOS 正在推出暗模式，现在您的 NativeScript 应用也可以拥有暗模式。新的 NativeScript 主题内置了一个适用于所有配色方案的暗模式。

例如，以下是我们的简单按钮应用应用新主题的暗模式后的外观。
android-dark-mode-2ios-dark-mode-3

启用此暗模式就像向 NativeScript 应用的根元素添加 ns-dark 类名一样简单。

根据您构建应用的方式，可能有一些不同的元素是您的根元素。对于 NativeScript-Angular 应用，您的根元素通常是您的 <page-router-outlet>，它通常位于您的 app.component.html 文件中。

<page-router-outlet class="ns-dark"></page-router-outlet>

如果您的应用使用抽屉，则您的根元素可能是 <RadSideDrawer>。

<RadSideDrawer class="ns-dark">
    ...
</RadSideDrawer>

最后，如果您的应用不使用抽屉，并且不使用 Angular，则您可能需要将 ns-dark 类名应用于 <Frame>。

<Frame class="ns-dark"></Frame>

无论如何，一旦应用 ns-dark 类名，您的应用应立即更改为使用一组暗色显示，而无论您使用哪种配色方案。

此外，还有一个 JavaScript/TypeScript API 用于以编程方式在暗模式和亮模式之间切换您的应用，以防您想为用户提供切换暗模式的选项。

import Theme from "nativescript-theme-core";

Theme.setMode(Theme.Dark); // Or Theme.Light

以下是该 API 在我们的示例应用中运行时的外观。
dark-mode-3

提示：您可以检测用户是否在其 iOS 设备上启用了暗模式，并根据用户的全局 iOS 首选项有条件地在您的应用中应用暗模式。很酷吧？

现在您已经了解了如何使用新主题以及如何试用暗模式，让我们看看新主题的最后一个很酷的功能——能够使用 Kendo UI ThemeBuilder。

使用 Kendo UI ThemeBuilder 创建主题

Kendo UI ThemeBuilder 是一个用于直观创建主题的工具。
themebuilder

从历史上看，该工具仅用于 Web 应用，但现在您也可以使用相同的工具为您的 NativeScript 应用配置配色方案。

要试用它，请访问该工具，选择开始主题设计，选择一个基本主题（Material 是移动应用的良好起点），然后点击创建按钮。

themebuilder-create

如果您愿意，可以随意玩弄主题颜色，然后点击右上角的下载按钮，这将为您提供一个包含两个文件的 .zip 包，一个 app.css 文件（如果您愿意，可以在 Web 上使用），以及一个 variables.scss 文件（您需要使用它来将配色方案与 NativeScript 一起使用）。

file-tree

在我们继续之前，有一点很重要：要在 NativeScript 中使用 ThemeBuilder 生成的配色方案，您必须在 NativeScript 应用中使用 SASS，因为 ThemeBuilder 输出 SASS 变量，而新的 NativeScript 主题会使用这些变量。

好消息是在 NativeScript 中使用 SASS 非常容易。事实上，从 NativeScript 6.0 开始，所有新应用默认都内置了 SASS 支持，您只需在与 app.css 文件相同的文件夹中创建一个 app.scss 文件即可开始使用。

在您在 ThemeBuilder 中配置主题、下载相应的文件并为您的应用创建 app.scss 文件后，打开您的 app.scss 文件并将下载的 variables.scss 文件的内容粘贴到其中。您的 app.scss 文件应如下所示。

/* Contents of variables.scss */

@import "~nativescript-theme-core/index";

/* Your custom CSS */

例如，以下是默认 Bootstrap 主题的外观。

$base-theme:Bootstrap;
$skin-name:Bootstrap;
$swatch-name:Bootstrap;
$border-radius: 0.25rem;
$accent: #007bff;
$secondary: #e4e7eb;
$info: #17a2b8;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;
$body-bg: #ffffff;
$body-color: #292b2c;
$component-bg: #ffffff;
$component-color: #292b2c;
$card-cap-bg: #f7f7f9;
$card-cap-color: #292b2c;
$series-a: #0275d8;
$series-b: #5bc0de;
$series-c: #5cb85c;
$series-d: #f0ad4e;
$series-e: #e67d4a;
$series-f: #d9534f;

@import "~nativescript-theme-core/index";

就这样！只需插入这些变量，您将拥有一个使用您配置的 ThemeBuilder 主题的应用。例如，以下是我们的示例按钮应用中 ThemeBuilder Bootstrap 配色方案的外观。
ios-bootstrapandroid-bootstrap

请随意尝试使用 Kendo UI ThemeBuilder 为您自己的应用创建完美的主题。

后续步骤

新的 NativeScript 主题提供了新的外观，以及您可以在应用中利用的一些新功能，例如暗模式以及使用 Kendo UI ThemeBuilder 构建自定义主题的功能。

新主题处于测试阶段，因此我们希望获得您的反馈。您对主题类名的更新有何看法？暗模式看起来像是您会使用的东西吗？一切是否按预期工作？您喜欢使用 Kendo UI ThemeBuilder 吗？

请在评论中告诉我们，如果您在测试主题时发现任何问题，请在 GitHub 上创建一个问题，以便我们可以在主题最终发布之前解决它。