宣布 NativeScript 4.1 版本发布

NativeScript 4.1 版本发布了！🎉 此版本带来了令人印象深刻的性能改进和备受期待的功能。

一些亮点包括...

Android 上的应用启动时间缩短了 50%，
支持 Angular 6，
令人惊叹的新 UI 场景：iOS 的 ARKit，Angular 中的模态导航和 CSS 渐变，
以及 **更多其他功能**（有关详细信息，请参见下文）。

感谢我们的社区，我们在此版本期间收到了大量外部拉取请求！您可以在此处找到完整的贡献者列表。

您现在可以在 YouTube 上观看 2018 年 6 月的完整 NativeScript 4.0/4.1 网络研讨会视频！

新的用户界面场景 📱

增强的增强现实支持

使用 iOS 的 ARKit 很大程度上依赖于使用 vector 类型。因此，我们正在添加对这种内置类型的支持。现在，让您的应用程序在人群中脱颖而出（并向上/向下/向左/向右）！看看这个使用 NativeScript 构建的 legendARy 演示

nativescript ar support

提示： 在这篇博文中了解更多关于 NativeScript 的 AR 支持的信息。

CSS 渐变支持

感谢社区成员 vultix 的出色工作，现在 {N} 支持线性渐变背景。在我们的文档中了解更多信息。

nativescript css gradients

Angular 中的模态导航

在下面关于 Angular 的完整部分中，了解有关模态导航选项的更多信息！

性能改进 🚀

V8 引擎升级到 6.6

在本版本之前，NativeScript 中使用的 V8 版本为 v5.5，已超过 1.5 年。通过此更新，我们将在 V8 引擎中带来大量改进，最显著的一项是您将获得的性能提升！🚀

有关其他重要的 V8 更新，请访问 V8 博客。

启动性能改进

由于升级到 V8 6.6 和 webpack 4，Android 上的启动时间现在与 iOS 相当 - 轻松低于 2 秒的阈值。根据设备和特定应用，Android 应用启动时间现在从 Pixel 2 等高端设备上的 800 毫秒到 Nexus 5X 等旧设备上的 1.8 秒不等。与 4.0 版本中的启动时间相比，这 **提高了约 50%**！

以下是在 NativeScript 4.0 🐢（左侧）和 4.1 🚀（右侧）上运行相同应用程序的示例

improved startup time

改进的工具和依赖项支持 🔨

使用多个 iOS 模拟器

在 Xcode 9 之前，一次只能使用一个 iOS 模拟器。使用 Xcode 9 及更高版本后，这种情况发生了变化，现在您可以在 macOS 上运行多个模拟器。使用 4.1，我们增加了对 **同时使用所有当前运行的 iOS 模拟器** 的全面支持。

这意味着您可以在 iPhone X、iPhone 8、iPad 2 等设备上实时同步您的更改，并立即查看您的应用程序在所有这些设备上的外观和行为。您还可以同时在多个 iOS 模拟器、iOS 设备、Android 模拟器和 Android 设备上运行您的应用程序 - NativeScript CLI 将自动部署和实时同步所有您的更改。

multiple simulators

Gradle 升级到 4.4 并支持 Java 10

根据大众需求，我们增加了对 Java 10 的支持。这将通过不挑剔使用 Java 8 来简化本地设置。此外，您现在还可以使用针对较新版本的 Java 编译的库。

支持的 Node.js 版本

随着 Node.js 的最新 LTS 版本为 8.11.2，我们开始弃用旧版本。Node.js v4 已被弃用数月，现在我们停止对其的支持。这意味着您可能需要更新 Node.js 才能使用 NativeScript CLI。

我们还弃用了对 Node.js v6 的支持 - 您仍然可以构建和运行您的应用程序，但输出中会显示一条警告 ⚠️ 消息。将不再处理这些版本的未来问题和支持请求。

我们 **增加了对 Node.js v10 的支持**，因此您可以在使用 NativeScript CLI 时获得所有最新功能和改进。

Webpack 更新

下一个版本的 nativescript-dev-webpack 带来了简化的设置和启动时间 **提高了 Android 的启动时间，最高可达 30%**。此版本的亮点是支持 webpack 4 和 Angular 6。以下列出了一些其他功能

自动为非 Angular 应用程序注册页面、模块和组件；
统一的自定义 Android 组件设置（带和不带快照）；
改进的 Android 压缩：启用了 UglifyJS compress 选项并使用 ES 模块进行捆绑；
改进的快照生成：所有外部节点包现在都属于快照块的一部分。用户还可以控制哪些应该执行，哪些不应该执行。

您可以在这篇博文中找到有关 webpack 更新的更多详细信息。

Angular 🆖

NativeScript 的 Angular 集成已更新，支持 Angular 6！这是一个主要版本，包含可能会影响您的应用程序行为的功能更改。

Angular 6 需要 webpack 4。因此，您也需要更新到 nativescript-dev-webpack 0.12.0。

使用 Angular TestBed 进行单元测试

您现在可以使用 Angular 的事实上的单元测试工具 - TestBed，为 NativeScript 编写测试！感谢我们的社区成员 Justin DuJardin 和 Martin Reinhardt 实施了这个非常受欢迎的功能。您将很快能够在专门的博文中了解所有内容。

Angular 灵活的根组成

**应用程序根更改** - 我们在 4.0 中提供了一种新的引导方法 run，该方法删除了应用程序的默认根 Frame 包装器。这使您可以指定应用程序的不同根视图，例如 Drawer 或 TabView。为了在 Angular 应用程序中提供相同的功能，我们实现了一种新的引导机制，该机制删除了隐式根 Frame。这意味着您的 app.component.html 文件的根元素将成为应用程序的根元素。这在决定应用程序导航模式时提供了更大的灵活性。不幸的是，这意味着我们必须引入一些潜在的破坏性更改。**大多数应用程序应该不受影响。**

潜在的破坏性更改 #1：由于存在隐式根 Frame，以前可以在您的 app.component.html 文件中使用 ActionBar 元素。使用新的引导将无法实现这一点。为了实现相同的效果并在根页面上使用 ActionBar，您现在必须在您的 app.component.html 中设置一个 <page-router-outlet> 元素，并将您的页面移动到默认路由。页面路由出口将为您创建一个底层的 Frame 元素，并且初始导航将创建一个 Page，这将启用 ActionBar 组件。

潜在的破坏性更改 #2：现在，app.component.html 文件的根元素成为应用程序的根元素，您不能对它应用布局属性，例如边距、宽度、高度等。

注意：目前无法更改应用程序的根视图。如果应用程序的根视图是 TabView，则无法导航到应用程序中不存在 TabView 的页面。在您需要登录页面和 TabView 作为根视图的情况下，建议将登录功能放在模态视图中（请参见下文）。

**页面路由出口更改** - 使用 {N} 4.0，我们引入了在应用程序的根级别拥有多个 Frame 元素实例（导航容器）的能力。{N} Angular 实现不依赖于 Frame 组件进行导航，因此我们必须做一些额外的工作才能使相同的功能成为可能。Angular 中多个 Frames 的等效项称为路由出口。Angular 允许您指定多个同级出口，只要它们被命名，因此这非常适合该功能。但是，在处理历史记录方面也存在很大差异。核心 {N} 框架和移动应用程序通常按每个 Frame 保存历史记录，这意味着您可以在一个 Frame 中后退一个页面，同时保持另一个 Frame 中的相同页面。Angular 作为一种浏览器优先技术，将历史记录处理为线性堆栈。为了在两个世界中实现功能对等，我们进行了以下更改

<page-router-outlet> 现在在使用的地方添加了一个 Frame 元素。之前的行为是页面路由出口控制应用程序的单个根 Frame 元素。
Angular 位置历史记录现在为应用程序组件文件中的每个命名路由出口单独保留。这意味着您可以在两个同级路由出口中分别导航，然后分别在每个路由出口中后退。这在您使用 TabView 作为应用程序的根目录，并在每个选项卡中使用页面路由出口的情况下最明显。可以向前导航多个选项卡，然后以不同的顺序导航回。

这两项更改共同使 {N} Angular 实现更接近于 {N} 核心框架实现。**有关示例，请参考 Angular 模板：**

主从 - 演示了一种线性层次导航模式，其中页面路由出口是应用程序的根目录。
抽屉导航 - 演示了一种横向导航模式，其中 RadSideDrawer 是应用程序的根目录。
选项卡导航 - 演示了一种横向导航模式，其中 TabView 是应用程序的根目录。

模态视图中的导航

{N} 4.0 中的另一个主要功能是能够打开模态页面并在其中导航。其目的是允许类似向导的模态。到目前为止，Angular 模态页面的内容总是隐式地包含在一个 Page 元素中。为了允许在模态视图中导航，我们必须删除这个隐式包装器，并让您指定模态视图的根元素。通过新的更改，模态视图文件的第一个元素将成为其根视图，您可以安全地将页面路由出口放置在那里，以便您可以在其中进行适当的导航。

潜在的破坏性更改：现在，模态视图文件的根元素成为模态视图的根元素，您不能对它应用布局属性，例如边距、宽度、高度等。

注意：您仍然可以使用旧的单页模态视图，但它们不会自动包装在Page元素中。

LayoutChanged 事件 🍱

在 4.1 版本中，我们引入了高度需求的layoutChanged事件，该事件将在由于布局处理导致视图的布局边界发生变化时触发。主要用例之一是使用getActualSize()获取正确的视图大小。在处理与大小相关的动画时，适当的视图大小可能很有用。请注意，在对视图进行变换（例如修改 translateX、translateY 或 rotate）时，不会触发layoutChanged。