七桃资源网

七桃资源网

新手引导_NativeScript 中文文档

qtfan 0 3 次浏览 技术文章
NativeScript 如何能与 React Native同台竞技?

大家好，很高兴又见面了，我是&#;高级前端进阶&#;，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

今天给大家带来的主题是 NativeScript 和 React Native 之间的比较，随着 NativeScript 版本的最新发布，我觉得是时候跟大家聊聊这个跨平台原生应用框架了。话不多说，直接进入正题！

1.什么是 NativeScript 和 React Native？

使用 JavaScript 构建跨平台移动应用程序已经悄然改变了 JavaScript 开发人员的默认规则。 开发人员不仅可以构建在 Web 上运行的应用程序，还可以构建使用 JavaScript 运行的适用于 Android 和 iOS 的 Native 应用程序。

而随着 React Native 和 NativeScript 等不同框架的兴起，开发者已经可以使用 JavaScript 构建高效、生产就绪且可扩展的移动应用程序。

首先一起来聊聊 NativeScript。NativeScript 的愿景是通过直接使用平台 API 来解放开发，而无需使得开发者放弃对 JavaScript 的热爱。 在与框架无关的团队中使用 JavaScript 构建跨平台移动应用程序时，值得将 NativeScript 视为首选工具。

Empowering JavaScript with native platform APIs. Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love Angular, Capacitor, Ionic, React, Solid, Svelte, Vue with: SwiftUI, Jetpack Compose, Flutter and you name it compatible.

因此，无论选择的 JavaScript 框架是 Vue、React、Svelte、Angular 还是 Vanilla JavaScript，NativeScript 都能满足开发者需求。

另一方面，React Native 是 Facebook 创建的一个 JavaScript 库，它使用 React 构建原生移动应用程序，这意味着开发者无法使用 Vue、Angular 或任何其他 JavaScript 框架来完成 React Native 的移动应用程序构建。

但是，这并不意味着 App 或 Play 商店上的所有 React Native 应用程序都是使用纯 JavaScript 构建的，因为在某些情况下，开发人员必须使用 Swift/Objective-C 或 Java/Kotlin 编写 Native 代码才能访问默认情况下 JavaScript 不可用的 Native API 。

考虑到这一点，接下来一起看看 React Native 与 NativeScript 之间的比较。

2.NativeScript 和 React Native 社区支持

社区支持是选择正确框架时要考虑的最重要因素之一，但是令人惊讶的是 NativeScript 比 React Native 存在的时间更长。 NativeScript 的初始版本是在 年，而 React Native 最初版本是在 年 3 月 日发布。

虽然一年的差异似乎是一种优势，但 React Native 的增长和采用率远高于 NativeScript。 React Native 在 npm 上记录的每周下载量约为 1632k，而 NativeScript 每周平均下载量大约为 10k。

在贡献者方面，React Native 在 GitHub 上拥有超过 2, 名贡献者，而 NativeScript 有 名贡献者。 NativeScript 被超过 6k 名开发人员使用，而 React Native 在 GitHub 上超过 1352k 的开发人员使用。

这一巨大差距展示了开发者社区对 React Native 的广泛采用，并影响了第三方库的数量、错误修复和 StackOverflow 上的答案。因此，在社区支持方面，React Native 更受欢迎。

3.NativeScript 和 React Native 快速入门

设置 React Native 项目

对于刚接触移动开发的 Web 开发人员来说，开始和设置 React Native 项目可能具有挑战性，当然可以借助于 Expo。Expo 用于构建一个在所有用户设备上本地运行的 JavaScript/TypeScript 项目。

Build one JavaScript/TypeScript project that runs natively on all your users&#; devices.

可以通过下面命令快速使用 Expo:

npx create-expo-app my-app

虽然 Expo 确实有一些限制，但这些限制不会影响大多数使用 Expo 构建的应用程序。开发者还可以使用 Expo Go，Expo Go 是一个免费的开源客户端，用于在 Android 和 iOS 设备上测试 React Native 应用程序，而无需在本地构建任何东西。它允许开发者打开通过 Expo CLI 提供的应用程序，并在开发它们时更快地运行项目。

Expo Go在 Android Play 商店和 iOS App Store 上均可用。

  • Android Play 商店 - Android Lollipop (5) 及更高版本
  • iOS 应用商店 - iOS 及更高版本

对于具有 React 背景的开发人员来说，开始使用 React Native 更容易。 但是，如果选择的主要 JavaScript 是 Angular，那么学习曲线可能会很陡峭。

设置 NativeScript 项目

在引导 NativeScript 应用程序时，使用官方模板开始使用 NativeScript 相当容易。 开发者可以通过在终端中运行以下命令来初始化带有侧边抽屉的 NativeScript 应用程序：

ns create myCoolApp --template <template-package-name>
// 直接运行该命令
ns create myCoolApp --angular 
// or --ng for short
ns create myCoolApp --vue
ns create myCoolApp --vue --ts 
// for vue with typescript
ns create myCoolApp --react
ns create myCoolApp --js
ns create myCoolApp --svelte
// 使用指定风格的默认模板创建应用程序

NativeScript 的优点在于它与框架无关，这意味着开发者可以使用 Angular、Vue、Svelte、React 甚至 Vanilla JavaScript 等 JavaScript 框架使用 NativeScript 构建移动应用程序。

然而，与其他任何框架相比，NativeScript 与 Angular 的同步效果最好，因为 NativeScript 团队与 Google 合作以确保这两种工具在构建移动应用程序时能够无缝工作。

通过使用 NativeScript Playground 应用程序，开发者可以在物理 Android 和 iOS 设备上运行应用程序，就像 Expo Go 一样。

总体而言，Expo Go 应用程序提供了比 NativeScript playground 更好的开发人员体验，因此对于寻求更简单设置体验的开发人员来说，这是一个加分项。

4.NativeScript 和 React Native 热加载

React Native 热加载

热加载功能在移动应用程序开发中非常重要，因为极大地提高了开发人员的工作效率。 没有开发人员愿意等待超过一分钟时间来查看在开发阶段注入到移动应用程序中的每个小变化。

在 React Native 版本中，团队宣布了一项名为快速刷新的功能。 快速刷新统一了之前 React Native 版本中已经存在的实时重新加载功能和热重新加载功能。

启用快速刷新后，开发者可以对应用程序进行更改并几乎立即看到更改。 默认情况下，此功能会保留功能组件中的本地状态，但不会保留类组件中的本地状态。

NativeScript 热模块替换

NativeScript 的热模块替换 (HMR) 功能在 NativeScript 中发布。 它支持 Visual Studio Code 调试，即使 HMR 功能仍在运行，开发人员也可以使用调试器。

NativeScript 还完全支持 SASS 文件，这意味着当在应用程序中对 .scss 或 .sass 文件进行更改时，会在开发过程中快速反映在应用程序中。HMR 在从 NativeScript 应用程序目录中添加或删除文件时也能起作用。

NativeScript 也支持 .vue 文件中的脚本更改，但是在 Vue 中使用 TypeScript 时它有一个限制，并且在开箱即用的 NativeScript Angular 项目中有完整的 HMR 支持，不需要额外的配置。

HMR 和快速刷新的性能相似，并且都具有巧妙构建的功能，例如在 NativeScript 中调试 Visual Studio Code 和在 React Native 中进行错误恢复。

5.Native API

React Native API

React Native 附带了一些基本的开箱即用模块，但在某些情况下，开发者可能需要 React Native 尚无相应模块的原生功能。 在这种情况下，则必须编写 Native 模块（Native Modules）来与 Native API 进行通信。

实现这一点需要特殊的桥梁，这需要一定程度的 Native 开发专业知识。 但是，考虑到 React Native 生态的规模，开发者可能很容易在 GitHub 或 npm 上找到现有的原生模块。

NativeScript API

在 NativeScript 中访问 Native Platform API 是 NativeScript 最重要的特性。 开发人员可以从 JavaScript 调用平台 API，而不是使用 Objective-C 或 Kotlin 编写本机代码。

const formatMessage = level => `The Battery Level is: ${level}%`
// iOS直接原生访问！
let value = UIDevice.currentDevice.batteryLevel * 
// Android 
let value = bm.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
alert(formatMessage(value))

这就是 NativeScript 优于 React Native 的地方，因为 JavaScript 开发人员不需要特定平台语言的专业知识即可使用 Native API。

下面是一些 npm 包，其是 NativeScript 开发的基础并且很容易理解。

  • @nativescript/core：一个 JavaScript 库，提供易于使用的 api，用于与 iOS 和 Android 平台 API 交互。
  • @nativescript/android：支持 Android NativeScript 开发的 v8 JavaScript 引擎运行时。
  • @nativescript/ios：支持 iOS NativeScript 开发的 v8 JavaScript 引擎运行时。开发者还可以使用 npm 标签 JSC 使用此运行时的 JavaScriptCore 版本，这对于可能遇到 v8 引擎问题的项目很有用。
  • @nativescript/types：是为所有可用于进行 NativeScript 开发的 iOS 和 Android API 提供了 TypeScript 定义。
  • @nativescript/webpack：这为所有基础 NativeScript 开发提供了加载程序、帮助程序和基本配置，以调试、运行、构建和发布应用程序。
  • nativescript：CLI（命令行界面）用于创建/运行/构建/部署 NativeScript 应用程序。 通常通过 npm install -g nativescript 进行全局安装以及适当的环境设置。

6.React Native 和 NativeScript 性能

NativeScript 应用程序通常较慢，因为该框架采用单线程方法来访问本机设备 API。

与 NativeScript 不同，React Native 应用程序使用多线程模型，其中 JavaScript 和应用程序的界面在不同的线程上运行。 因此，在构建性能是关键因素的移动应用程序时，React Native 是最佳选择。

React Native 还提供更快的 UI 渲染，因为它使用虚拟 DOM 来更新应用程序 UI，类似于 React。

7.NativeScript 和 React Native 文档支持

NativeScript 的文档很容易理解，并且有一些关于如何实现动画、手势、HTTP 请求和代码共享等内容的非常棒的插图。

而且，对于 NativeScript 与 Svelte 和 Vue 的特定用例，有单独的文档。 但大多数时候，开发人员必须在官方文档之外了解 NativeScript 生态系统的工作原理。

React Native 拥有比 NativeScript 更成熟的生态系统，随之而来的是对文档明确的期望，因为跨平台移动应用程序开发的初学者和专家都可以访问它。

然而，虽然文档通俗易懂，但缺乏细节，这可能会使初学者不清楚一些概念。

使用 Expo 构建 React Native 应用程序并使用 Expo 文档简化了作为初学者构建功能性 React Native 应用程序的 React Native 文档的使用。

两者都没有最好的文档，使用这两种框架的开发人员通常必须超越官方文档才能了解框架的各个方面。

8.使用 NativeScript 和 React Native 的公司

React Native 目前被 Facebook、Bloomberg、Coinbase、Discord、Tesla 等顶级品牌和公司用于生产。 这证明了 React Native 的规模和流行程度。

Facebook marketplace 也是用 React Native 构建的，证明如果你有一个用本地语言编写的现有移动应用程序，你可以逐步采用 React Native 来构建你的移动应用程序的不同部分。

尽管 React Native 在这里成为焦点，但这并不意味着 NativeScript 不能解决 React Native 为使用它的公司所做的业务问题。 看看这里使用 NativeScript 构建的很棒的应用程序表明它可以构建生产就绪的移动应用程序。

9.本文总结

作为 Web 开发人员使用 JavaScript 构建移动应用程序是一种很棒的体验，因为该语言在 Web 浏览器上运行以构建适用于 Android 和 iOS 的本机应用程序。 在所有用于构建跨平台应用程序的 JavaScript 框架中，React Native 和 NativeScript 位居榜首。

在这篇文章中，我们介绍了每个框架的独特之处以及它们的发展程度。 选择任一框架最终取决于移动应用程序的要求、性能成本、首选 JavaScript 框架、移动应用程序开发的先验知识以及所需的本机 API。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://blog.logrocket.com/nativescript-react-native/

https://nativescript.org/

https://docs.nativescript.org/understanding-packages.html#nativescript-ios

https://www.monterail.com/blog/nativescript-vs-react-native

https://docs.nativescript.org/introduction.html

https://github.com/facebook/react-native

https://tsh.io/blog/react-native-vs-nativescript/

https://tsh.io/blog/react-native-vs-nativescript/

https://docs.nativescript.org/#overview-of-nativescript-development

原文链接：，转发请注明来源！
七桃资源网 › 技术文章 › 新手引导_NativeScript 中文文档