返回博客首页
← 所有文章

NativeScript 技巧和窍门来自 {N} 小队

2019 年 3 月 19 日 — 作者 Rob Lauer

我们向 Progress 的 NativeScript 团队成员征求了一些可能有用的或鲜为人知的技巧和窍门，这些技巧和窍门可能会帮助 NativeScript 开发者在开发下一个伟大的应用程序的道路上。以下是他们的分享！

alexander vakrilov

 Alex Vakrilov

启用路由跟踪

这并不是 NativeScript 特有的功能，但在调试路由问题和找出路由配置问题时非常有用！

它通过在调用 NativeScriptRouterModule.forRoot 时传递一个选项来实现

NativeScriptRouterModule.forRoot(routes, { enableTracing: true})

结果是在您的控制台中记录所有路由事件（包括解析路由的错误）

JS: Router Event: NavigationStart
JS: NavigationStart(id: 2, url: '/home')
JS: Router Event: RoutesRecognized
JS: RoutesRecognized(id: 2, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
JS: Router Event: GuardsCheckStart
JS: GuardsCheckStart(id: 2, url: '/home', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )

启用跟踪

我们在 tns-core-modules 和 ns-angular 中使用了许多内置跟踪类别进行日志记录。启用它们可以提供有关框架在特定区域调试问题时内部发生的事情的见解。以下是启用的一些有用类别

import * as trace from "tns-core-modules/trace";

// Logs info on measure and layout passes
trace.addCategories(trace.categories.Layout); 

// Logs info when modifying the view tree (adding views, removing views, etc.)
trace.addCategories(trace.categories.ViewHierarchy);

// Logs info related to navigation
trace.addCategories(trace.categories.Navigation);

// Don't forget to enable tracing
trace.enable();

trace.categories.XXX 中还有更多核心模块类别。对于 Angular 项目，nativescript-angular/trace 模块中还有 Angular 特定的跟踪类别。

性能分析模块

tns-core-modules/profiling 的性能分析模块中包含许多有趣的实用程序。一些有用的方法

  • time()：在 NativeScript 中获取时间的最快（也是最准确）方法
  • start("my-timer-name") / stop("my-timer-name")：stop 方法将返回一个 TimerInfo 对象，其中包含一些有用的信息，例如执行了多少次启动/停止迭代、总时间、上次测量的时间等。
  • @profile 装饰器：您可以将其添加到方法上，它将自动跟踪执行通过该方法的次数以及花费的总时间。您可以使用 dumpProfiles() 转储由 profile 装饰器收集的所有信息。不过，您应该调用 enable() 才能使用装饰器。
todd anglin

 Todd Anglin

  • 使用 TYPESCRIPT！！！
  • 使用 VISUAL STUDIO CODE！！！
  • 使用 Visual Studio Code（以及 {N} 插件）在 JavaScript 代码中设置断点，并在您的应用程序在设备/模拟器上运行时检查变量值
    • 一旦您遇到断点，您就可以通过 VS Code 命令行开始运行任意命令
    • 适用于测试您认为应该起作用的代码，或探索可用的 API
  • 如有疑问，请删除您的 node_modules、platform 和 hooks 文件夹，然后重新构建/重新运行您的应用程序，以“干净”地启动
  • 在为 iOS 构建时，您始终可以使用 XCode 来构建和部署您的应用程序
    • 只需确保打开 *.xcworkspace 而不是 *.xcodeproj 文件
  • 您可以在 platforms > [ios/android] > build 中找到 iOS 和 Android 的原始构建资产
  • 使用字体图标来代替应用程序中所需的大多数小图像（不要为所有内容创建 1x、2x、3x 的图像）
  • 使用自定义数据绑定转换器将数据转换为图像（例如天气图标或特定型号的图像等）
  • 如果您计划通过 iOS AppStore 提交，请确保您的应用程序中包含指向隐私政策、使用条款等的链接
  • iOS AppStore 跟踪应用程序的版本和构建号
    • 新的版本将触发 AppStore 的手动审核（即使在测试版测试期间）……这可能需要一些时间
    • 新的构建号通常会在测试版测试期间立即批准
    • 如果您想通过 TestFlight 快速发布新测试版，只需增加构建号（不干净，但有效）
  • 考虑一下，当您准备好发布应用程序时，您将如何监控/排查应用程序崩溃/错误
    • 如果您不添加某种日志记录，一旦您发布应用程序，它将成为一个黑盒子！
tj vantoll

 TJ VanToll

利用 tns resources generate 命令提供的省时功能！您可以 从一个主源创建您的图标和启动画面，只需几分钟。

正如你们许多人已经知道的那样，NativeScript 市场中的示例应用程序 是一个随时可用的“可复制粘贴”代码的源泉。此外，它们已经在 NativeScript Playground 中运行，因此非常易于试验。

nativescript sample app

正在开发一个新的 NativeScript 插件？ 使用插件种子！ 它消除了很多痛苦。

在 Android 上处理大型图像？ 这可能是一场斗争，因此请查看我们有关 Android 图像优化 的文档（以及我们有关 webpack 和 提高启动时间 的其他性能优化文章）。

向您的应用程序添加新的字体可能是改善外观和感觉的最简单方法。 查看这篇文章，了解如何正确识别您的自定义字体，以便您的 NativeScript 应用程序可以正确使用它们。

sebastian witalec

 Sebastian Witalec

rob lauer

 Rob Lauer

小心将 <ScrollView> 或 <ListView> 嵌套在 <StackLayout> 中。由于 Android 上的渲染问题（我并不完全了解 😅），您通常应该使用 <GridLayout> 代替，如下所示

<GridLayout rows="auto, *">
    <ListView row="1" ...

不要重新发明轮子！如果您尝试与设备 API 或第三方 SDK 交互，那么很可能其他人已经解决了这个问题。 查看 NativeScript 市场，获取全面的插件列表，为您节省大量时间。

使用 npm install -g nativescript 升级到 NativeScript CLI 的最新版本后，请确保您还使用 这些详细说明 更新您的应用程序。

哦，对了，说到更新，如果您使用的是 Visual Studio Code，请安装 Version Lens 扩展！此扩展使用代码透镜显示 package.json 中每个包的最新版本（并提供一键更新功能）

version lens

请注意，一旦您在 package.json 中更新了包版本，您需要在重新构建应用程序之前删除 platforms 和 node_modules 目录。

todor totev

 Todor Totev

只有一个 😀：您可以使用 NativeScript Playground 添加没有原生组件的 NativeScript 插件。它隐藏在“添加 NPM 包”菜单中

nativescript playground add npm package

还有您呢？

您是否有自己的技巧或窍门要分享？在评论中分享您的想法吧！