NativeScript 8.0 标志着其未来发展坚实的基础以及自然现代 JavaScript 演进的步伐，通过解决一些最古老的特性请求，增加官方 eslint 包的结构完整性，通过新的 RootLayout 支持创意视图开发，通过新的 Capacitor 集成确认广泛的用例适用性，支持最新的 webpack5 以及网站和文档的重新设计。
hidden 绑定属性，用于更多性能调整用例RootLayout 容器 - 提供更动态的创意视图开发我们想更详细地介绍一些内容，让我们开始吧。
快速跳转到以下部分
我们在 2020 年秋季发布了 NativeScript 7，这可能是该框架自诞生以来最大的结构性更新之一，它为即将到来的广泛改进奠定了基础，其中一些改进在 8.0 中显而易见。我们致力于每年发布两次主要版本 - 一次在春季（现在），另一次在秋季。这通常与行业内平台工具更新保持一致，我们每年都会与之保持一致。在每次更新中，我们都会继续改进更新/迁移故事，以满足需要。
这次，TSC 成员，Stanimira Vlaeva 深入研究，交付了 @nativescript/eslint-plugin。用于 NativeScript 项目的第一个官方 eslint 规则。这些规则可以用于帮助项目缓解框架破坏性变更，并提供一种方法来自动更新项目导入，使其与最新更新保持一致。随着时间的推移，此包将继续得到增强，以增强 NativeScript 的结构完整性。让我们看一下如何今天更新到 NativeScript 8。
正如一些人可能已经习惯了，你可以运行
npm i -g nativescript
ns migrate
这将安装最新的 NativeScript 8 CLI，然后运行迁移。
以下是你可以预期使用的依赖项
"dependencies": {
"@nativescript/core": "8.0.0"
},
"devDependencies": {
"@nativescript/android": "8.0.0",
"@nativescript/ios": "8.0.0",
"@nativescript/types": "8.0.0",
"@nativescript/webpack": "~5.0.0-beta.0"
}
我们已经成功地使用 NativeScript 8 和 @nativescript/webpack@~5.0.0-beta.0。事实上，它也快了很多，以下是一些数据
webpack4
# cold run after ns clean (includes npm install, pod install etc.)
prepare ios 42.08s user 10.86s system 125% cpu 42.063 total
prepare ios 13.01s user 1.00s system 126% cpu 11.052 total
prepare ios 13.03s user 0.97s system 131% cpu 10.663 total
prepare ios 13.36s user 0.99s system 131% cpu 10.903 total
webpack5
# cold run after ns clean (includes npm install, pod install etc.)
prepare ios 21.78s user 6.78s system 98% cpu 28.985 total
prepare ios 6.58s user 0.63s system 134% cpu 5.361 total
prepare ios 6.73s user 0.67s system 133% cpu 5.523 total
prepare ios 6.62s user 0.65s system 134% cpu 5.397 total
webpack 重写工作从去年 11 月就开始进行，这给了我们一个机会来试用 官方 RFC 流程。
我们将让它正式处于 beta 状态一段时间，但我们确实建议使用它，因为我们自己也正在使用。
在 NativeScript 社区贡献者，William Juan 在这里构建的一个精彩的示例应用程序中，可以观察到以下新功能：https://github.com/williamjuan027/nativescript-movies-demo
现在典型的 NativeScript webpack.config.js 看起来像这样
const webpack = require("@nativescript/webpack");
module.exports = (env) => {
webpack.init(env);
return webpack.resolveConfig();
};
上面的配置管理所有支持的框架及其特定的 webpack 要求（插件、加载器等），同时共享一个通用的基础配置，这简化了所有版本的功能。
虽然默认配置相当简洁，但你可以完全控制通过 @nativescript/webpack 解析的最终配置的任何方面。
另一个很棒的功能是，插件现在可以自动注册新的加载器、规则 - 事实上，插件可以对项目配置做任何事情 - 不再需要手动复制加载器和 webpack 插件了！
这种新的配置将避免“你是否使用最新的 webpack.config.js？”的反复问题。底层的基础配置可以通过 npm 轻松更新，而无需对项目进行任何更改。
Box Shadows 一直是 NativeScript 中一个高度请求的特性，事实上，它是在 2015 年首次被请求！
你现在可以使用 css box-shadow - 值支持符合 CSS 规范 - 你可以使用任何简写变体。
box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
另一位社区贡献者，Tiago Alves，在此 拉取请求 中添加了官方 text-shadow 支持。
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
一个全新的布局容器，它扩展自 GridLayout，提供了用于强大而有趣的动态视图创建和分层的新 API。
<RootLayout> 是一种布局容器，旨在用作应用程序的主要根布局容器，并带有一个内置 API，可以轻松控制动态视图层。它扩展了 GridLayout，因此具有网格的所有功能，但增强了额外的 API。
它的 API 可以在这里看到
export class RootLayout extends GridLayout {
open(view: View, options?: RootLayoutOptions): Promise<void>;
close(view: View, exitTo?: TransitionAnimation): Promise<void>;
bringToFront(view: View, animated?: boolean): Promise<void>;
closeAll(): Promise<void>;
getShadeCover(): View;
}
export function getRootLayout(): RootLayout;
export interface RootLayoutOptions {
shadeCover?: ShadeCoverOptions;
animation?: {
enterFrom?: TransitionAnimation;
exitTo?: TransitionAnimation;
};
}
export interface ShadeCoverOptions {
opacity?: number;
color?: string;
tapToClose?: boolean;
animation?: {
enterFrom?: TransitionAnimation; // only applied if first one to be opened
exitTo?: TransitionAnimation; // only applied if last one to be closed
};
ignoreShadeRestore?: boolean;
}
export interface TransitionAnimation {
translateX?: number;
translateY?: number;
scaleX?: number;
scaleY?: number;
rotate?: number; // in degrees
opacity?: number;
duration?: number; // in milliseconds
curve?: any; // CoreTypes.AnimationCurve (string, cubicBezier, etc.)
}
你可以使用 getRootLayout() 从任何地方获取应用程序中根布局的引用。
示例布局
<RootLayout height="100%" width="100%">
<GridLayout height="100%">
<label verticalAlignment="center" textAlignment="center" text="MAIN CONTENT AREA"></label>
</GridLayout>
</RootLayout>
示例 API 使用
// Open a dynamic popup
const view = this.getPopup("#EA5936", 110, -30);
getRootLayout()
.open(view, {
shadeCover: {
color: "#000",
opacity: 0.7,
tapToClose: true,
},
animation: {
enterFrom: {
opacity: 0,
translateY: 500,
duration: 500,
},
exitTo: {
opacity: 0,
duration: 300,
},
},
})
.catch((ex) => console.error(ex));
// Close the dynamic popup
getRootLayout()
.close(view, {
opacity: 0,
translate: { x: 0, y: -500 },
})
.catch((ex) => console.error(ex));
function getPopup(color: string, size: number, offset: number): View {
const layout = new StackLayout();
layout.height = size;
layout.width = size;
layout.marginTop = offset;
layout.marginLeft = offset;
layout.backgroundColor = color;
layout.borderRadius = 10;
return layout;
}
你可以在社区贡献者 William Juan 提供的 此示例仓库中找到一个完整的示例。
你可以在 这里玩转工具箱应用程序以获取更多示例
长期以来，Nota 的出色团队，丹麦国家残疾人阅读图书馆，一直在使用 nativescript-accessibility-ext 提供了一个很棒的 a11y 插件。
当我们开始开发 8.0 时，我们开始与 Morten Sjøgren 合作，将该插件直接集成到核心，作为一流的集成，多亏了 Morten 的出色工作，a11y 现在直接内置到核心。
今年春季，在 8.0 - 8.1 循环中，我们将专门发布一篇关于 a11y 的博客文章，以更详细地探讨这一点。
你可以在核心仓库的 工具箱应用程序中探索一些一流的 a11y 支持。
你还可以查看 新文档。
此包将为你的 iOS 应用程序添加一些深度交互式调试工具（仅在开发/调试模式下，因此不用担心它会影响你的发布/生产应用程序）。
你可以随时通过以下方式启用它
npm install @nativescript/debug-ios --save-dev
使用方法
import { NativeScriptDebugIOS } from "@nativescript/debug-ios";
NativeScriptDebugIOS.show();
npm install @nativescript/apple-pay
这提供了以下内容
<ApplePayBtn tap="onApplePayTap" buttonType="InStore" />
你可以在新的 插件文档 中找到有关它提供的全部文档。
npm install @nativescript/google-pay
这提供了以下内容
<GooglePayBtn cardNetworks="VISA, AMEX, DISCOVER" authMethods="PAN_ONLY, CRYPTOGRAM_3DS" tap="onGooglePayTap" width="100%" height="40" buttonType="PAY_BLACK" />
你可以在新的 插件文档 中找到有关它提供的全部文档。
核心中的 BottomNavigation 和 Tabs UI 组件带来了 Cocoapods，无论你的项目是否使用它们。在 8.0 中，它们现在由社区提供，在那里它们可以获得更多关注，不受 NativeScript 核心更新的约束或阻碍。
<BottomNavigation> 现在可以通过 @nativescript-community/ui-material-bottom-navigation 获得
API 相同，但是组件名称可以替换为 Readme 中找到的名称。
<Tabs> 现在可以通过 @nativescript-community/ui-material-tabs 获得
这是直接替换。
多年来，在使用 NativeScript 时出现了一些不同的最佳实践，我们花了一些时间概述了一些最基本的最佳实践，你应该了解这些最佳实践，以从你的项目中获得最佳结果。
随着时间的推移，本节肯定会添加更多提示/技巧。
下一个预定的社区更新将通过 Zoom 在 2021 年 4 月 7 日进行，并将以每月一次的频率持续进行，直到下一个主要版本发布前的一个月（9.0 将在秋季末到冬季初发布）。
多年来，NativeScript 社区在 Slack 上一直非常活跃，但是这一次，我们认为 Discord 是一个更适合接触社区的平台。
4 月份将进行两场直播，介绍如何将旧的 NativeScript 项目更新到 8.0，所以请关注 Twitter 和 NativeScripting 获取日期公告。
对于 8.1
2021 年及以后的更新路线图将在 2021 年 4 月发布。
我们要感谢社区的宝贵意见和支持。在此循环中提供的贡献令人惊叹，你们让 NativeScript 的工作变得无比快乐。此外，你们在 Open Collective 上表现出的巨大热情，每一次贡献都有助于 8.0 的实现，并为未来的更多精彩内容铺平了道路。