NativeScript - 快速指南

NativeScript - 简介

一般来说，开发移动应用程序是一项复杂且具有挑战性的任务。有许多框架可用于开发移动应用程序。Android提供了基于Java语言的原生框架，iOS提供了基于Objective-C/Shift语言的原生框架。但是，要开发支持两种操作系统的应用程序，我们需要使用两种不同的框架以两种不同的语言进行编码。

为了克服这种复杂性，移动框架支持此功能。使用跨平台或混合框架的主要原因是更容易维护单一代码库。一些流行的框架有 NativeScript、Apache Cordova、Xamarin 等。

JavaScript 框架概述

JavaScript 是一种多范式语言。它支持函数式编程、面向对象和基于原型的编程。JavaScript 最初用于客户端。如今，JavaScript 也被用作服务器端编程语言。JavaScript 框架是一种使 JavaScript 的使用变得更容易、更流畅的工具。

使用此框架，程序员可以轻松地将应用程序编码为设备响应式。响应能力是该框架变得非常流行的原因之一。

让我们看一下一些流行的 JS 框架 -

角

Angular 是最强大、最高效、开源的 JavaScript 框架之一。我们可以构建移动和桌面应用程序。谷歌使用这个框架。它用于开发单页应用程序（SPA）。

Vue.js

VueJS 是一个渐进式 JavaScript 框架，用于开发交互式 Web 界面。它是用于简化 Web 开发的著名框架之一。它可以轻松集成到前端开发的大型项目中，没有任何问题。双集成模式是创建高端 SPA 或单页应用程序最有吸引力的功能之一。

反应

ReactJS 是用于构建可重用 UI 组件的 JavaScript 库。它是由 Facebook 开发的。它是目前最流行的 JavaScript 库之一，背后拥有强大的基础和庞大的社区。

Node.js

Node.js 是一个开源的跨平台运行时环境，用于开发服务器端和网络应用程序。它基于 Google Chrome 的 JavaScript 引擎（V8 引擎）构建。Node.js 应用程序是用 JavaScript 编写的，可以在 OS X、Microsoft Windows 和 Linux 上运行。它提供了丰富的各种 JavaScript 模块库，简化了 Web 应用程序的开发。

NativeScript 概述

NativeScript 是一个开源框架，用于创建本机 iOS 和 Android 移动应用程序。它是一个JIT编译的框架。NativeScript代码运行在JS虚拟机上。它使用适用于 Android 和 iOS 平台的 V8 引擎运行时。NativeScript 使用 XML、JS 和 CSS 进行开发。它有一个称为 PlayGround 的 WebIDE。这个PlayGround支持简单的工作界面，易于管理项目，热重载和设备上的调试。

NativeScript 允许开发人员快速高效地创建本机跨平台应用程序，并节省开发、测试和培训成本。因此，原生应用程序在未来几年将继续丰富和强大，变得更好、更容易使用。

特征

NativeScript 拥有充满活力的社区支持。下面列出了 NativeScript 的一些显着特征 -

可扩展
模块热更换
易于设置
我们可以构建丰富的动画、图表、图表和列表
开发人员可以使用任何视图作为应用程序的根
懒惰编码

好处

NativeScript 帮助小型或大型公司构建跨平台移动应用程序。一些主要好处是 -

开发人员可以重用现有的工具和代码
易于修改、故障排除和更新新版本
开发经验好，我们不用花时间学习新工具
来自 JavaScript 的特定于平台的 API，无需学习 Cordova 插件
简化不同登录提供商的身份验证

NativeScript - 安装

本节介绍如何在您的计算机上安装 NativeScript。

先决条件

在开始安装之前，我们需要满足以下先决条件 -

Node.js
安卓
iOS系统

验证 Node.js

Node.js是一个 JavaScript 运行时引擎，构建在 Google Chrome 内部 JavaScript 引擎 v8 之上。NativeScript 广泛使用 Node.js 来实现各种目的，例如创建入门模板应用程序、编译应用程序等，您的计算机上必须安装Node.js。

希望您已经在计算机上安装了 Node.js。如果未安装，请访问链接https://nodejs.org/并下载最新的 LTS 包并安装。

要验证 Node.js 是否已正确安装，请在终端上输入以下命令 -

node --version

你可以看看版本。截至目前，节点当前稳定的“LTS”版本是12.14.0。

CLI 设置

NativeScript CLI 是一个基于终端/命令行的应用程序，允许您创建和开发 NativeScript 应用程序。Node.js 包管理器 npm 用于在您的计算机上安装 NativeScript CLI。

使用以下命令安装 NativeScript CLI -

npm install -g nativescript

执行此命令后，我们可以看到以下输出 -

安装程序

我们已经在系统中安装了最新的 NativeScript CLI tns。现在，在终端中输入以下命令 -

tns

这将列出快速入门指南。您可以看到以下输出 -

命令行

即使没有任何额外的设置，我们也可以使用 tns 来创建和开发应用程序。但是，我们无法在真实设备中部署该应用程序。相反，我们可以使用NativeScript PlayGround iOS / Android 应用程序运行应用程序。我们将在接下来的章节中检查它。

安装 NativeScript Playground 应用程序

转到您的 iOS 应用商店或 Google Play 商店并搜索 NativeScript Playground 应用。应用程序列在搜索结果中后，单击安装选项。它将在我们的设备中安装NativeScript Playground应用程序。

NativeScript Playground应用程序将有助于在 Android 或 iOS 设备中测试您的应用程序，而无需在真实设备或模拟器中部署应用程序。这将减少开发应用程序的时间，并轻松启动移动应用程序的开发。

Android 和 iOS 设置

在本章中，让我们学习如何设置系统以在模拟器或真实设备中构建和运行 iOS 和 Android 应用程序。

第 1 步：Windows 依赖项

在 Windows 命令提示符中执行以下命令并以管理员身份运行 -

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex 
((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

执行此命令后，将下载脚本，然后安装依赖项并进行配置。

第 2 步：macOS 依赖项

要在 macOS 中安装，您必须确保已安装 Xcode。NativeScript 必须使用 Xcode。如果未安装Xcode，则访问以下链接https://developer.apple.com/xcode/并下载；然后安装它。

现在在终端中执行以下命令 -

sudo ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

执行上述命令后，脚本将安装 iOS 和 Android 开发的依赖项。完成后，关闭并重新启动终端。

第三步：Android依赖

希望您已经配置了以下先决条件 -

JDK 8 或更高版本
安卓软件开发工具包
Android 支持存储库
谷歌存储库
Android SDK 构建工具 28.0.3 或更高版本
安卓工作室

如果没有配置上述先决条件，则访问以下链接https://developer.android.com/studio/install并安装。最后，在环境变量中添加 JAVA_HOME 和 ANDROID_HOME 。

第 4 步：验证依赖关系

现在一切都完成了。您可以使用以下命令验证依赖关系 -

tns doctor

这将验证所有依赖性并将结果总结如下 -

√ Getting environment information 
No issues were detected. 
√ Your ANDROID_HOME environment variable is set and points to correct directory. 
√ Your adb from the Android SDK is correctly installed. 
√ The Android SDK is installed. 
√ A compatible Android SDK for compilation is found. 
√ Javac is installed and is configured properly. 
√ The Java Development Kit (JDK) is installed and is configured properly. 
√ Local builds for iOS can be executed only on a macOS system. 
   To build for iOS on a different operating system, you can use the
   NativeScript cloud infrastructure. 
√ Getting NativeScript components versions information... 
√ Component nativescript has 6.3.0 version and is up to date. 
√ Component tns-core-modules has 6.3.2 version and is up to date. 
√ Component tns-android has 6.3.1 version and is up to date. 
√ Component tns-ios has 6.3.0 version and is up to date.

如果您发现任何问题，请在继续开发应用程序之前更正问题。

NativeScript - 架构

NativeScript 是创建移动应用程序的高级框架。它隐藏了创建移动应用程序的复杂性，并公开了一个相当简单的 API 来创建高度优化和高级的移动应用程序。NativeScript 即使是入门级开发人员也可以轻松地在 Android 和 iOS 中创建移动应用程序。

本章让我们了解一下NativeScript框架的架构。

介绍

NativeScript框架的核心概念是使开发人员能够创建混合风格的移动应用程序。混合应用程序使用特定于平台的浏览器 API 在普通移动应用程序中托管 Web 应用程序，并通过 JavaScript API 提供对应用程序的系统访问。

NativeScript 在JavaScript 语言上投入了大量资金，为开发人员提供高效的框架。由于JavaScript是客户端编程（Web 开发）事实上的标准，并且每个开发人员都非常了解 JavaScript 语言，因此它可以帮助开发人员轻松进入 NativeScript 框架。在底层，NativeScript 通过一组称为本机插件的 JavaScript 插件公开本机 API。

NativeScript 建立在Native 插件的基础上，并提供许多高级且易于使用的JavaScript 模块。每个模块都执行特定的功能，例如访问相机、设计屏幕等。所有这些模块都可以通过多种方式组合来构建复杂的移动应用程序。

下图显示了 NativeScript 框架的高级概述 -

NativeScript 应用程序- NativeScript 框架允许开发人员使用 Angular 样式应用程序或 Vue 样式应用程序。

JavaScript 模块- NativeScript 框架提供了一组丰富的 JavaScript 模块，明确分类为 UI 模块、应用程序模块、核心模块等。应用程序可以随时访问所有模块，以编写任何级别的复杂应用程序。

JavaScript 插件- NativeScript 框架提供了大量 JavaScript 插件来访问平台相关功能。模块使用 JavaScript 插件来提供特定于平台的功能。

本机插件- 本机插件是用特定于平台的语言编写的，用于包装系统功能，JavaScript 插件将进一步使用该系统功能。

平台 API - 由平台供应商提供的 API。

简而言之，NativeScript 应用程序是使用模块编写和组织的。模块是用纯 JavaScript 编写的，模块通过插件访问平台相关功能（只要需要），最后，插件桥接平台 API 和 JavaScript API。

NativeScript 应用程序的工作流程

正如我们之前了解到的，NativeScript 应用程序是由模块组成的。每个模块都支持特定的功能。引导 NativeScript 应用程序的两个重要模块类别如下 -

根模块
页面模块

根模块和页面模块可以归类为应用程序模块。应用程序模块是 NativeScript 应用程序的入口点。它引导页面，使开发人员能够创建页面的用户界面，并最终允许执行页面的业务逻辑。应用程序模块由以下三项组成 -

以 XML 编码的用户界面设计（例如 page.xml/page.component.html）
用 CSS 编码的样式（例如 page.css/page.component.css）
JavaScript 中模块的实际业务逻辑（例如 page.js/page.component.ts）

NativeScript提供了很多UI组件（在UI模块下）来设计应用程序页面。UI 组件可以在基于 Angular 的应用程序中以 XML 格式或 HTML 格式表示。应用程序模块使用 UI 组件来设计页面并将设计存储在单独的 XML page.xml/page.component.html中。可以使用标准 CSS 设计设计样式。

应用程序模块将设计风格存储在单独的 CSS、page.css/page.component.css 中。页面的功能可以使用 JavaScript/TypeScript 来完成，它可以完全访问设计以及平台功能。应用程序模块使用单独的文件 page.js/page.component.ts 来编码页面的实际功能。

根模块

NativeScript 通过 UI 容器管理用户界面和用户交互。每个 UI 容器都应该有一个根模块，UI 容器通过它来管理 UI。NativeScript 应用程序有两种类型的 UI 容器 -

应用程序容器- 每个 NativeScript 应用程序都应该有一个应用程序容器，并将使用 application.run() 方法进行设置。它初始化应用程序的 UI。

模型视图容器- NativeScript 使用模型视图容器管理模态对话框。NativeScript 应用程序可以有任意数量的模型视图容器。

每个根模块应该只有一个 UI 组件作为其内容。UI 组件又可以将其他 UI 组件作为其子组件。NativeScript提供了很多带有子功能的UI组件，如TabView、ScrollView等。我们可以将它们用作根 UI 组件。一个例外是Frame，它没有子选项，但可以用作根组件。框架提供了加载页面模块的选项以及导航到其他页面模块的选项。

页面模块

在 NativeScript 中，每个页面基本上都是一个页面模块。页面模块是使用 NativeScript 提供的丰富的 UI 组件集设计的。页面模块通过Frame组件加载到应用程序中（使用其 defaultPage 属性或使用 navigator() 方法），然后使用Root Modules加载，而在应用程序启动时又使用 application.run() 加载。

应用程序的工作流程如下图所示 -

上图按以下步骤详细解释 -

NativeScript 应用程序启动并调用 application.run() 方法。
application.run() 加载Root 模块。
根模块是使用任何一个 UI 组件设计的，如下所示 -
- 框架
- 标签视图
- 侧抽屉
- 任何布局视图
框架组件加载指定页面（页面模块）并进行渲染。其他 UI 组件将按照根模块中的指定进行渲染。其他 UI 组件也可以选择加载页面模块作为其主要内容。

基于 Angular 的 NativeScript 应用程序的工作流程

正如我们之前了解到的，NativeScript 框架提供了多种方法来满足不同类别的开发人员的需求。NativeScript 支持的方法如下：

NativeScript Core - NativeScript 框架的基本或核心概念
Angular + NativeScript - 基于 Angular 的方法
Vuejs + NativeScript - 基于 Vue.js 的方法

让我们了解 Angular 框架是如何融入到 NativeScript 框架中的。

步骤1

NativeScript 提供了一个对象（platformNativeScriptDynamic）来引导 Angular 应用程序。platformNativeScriptDynamic 有一个方法 bootstrapModule，用于启动应用程序。

使用 Angular 框架引导应用程序的语法如下 -

import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

这里，

AppModule是我们的根模块。

第2步

应用程序模块的简单实现（在指定代码下方）。

import { NgModule } from "@angular/core"; 
import { NativeScriptModule } from "nativescript-angular/nativescript.module"; 
import { AppRoutingModule } from "./app-routing.module"; 
import { AppComponent } from "./app.component"; 
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], imports: [
         NativeScriptModule,
         AppRoutingModule
      ], declarations: [
         AppComponent
      ]
   }
) export class AppModule { }

这里，

AppModule通过加载 AppComponent 组件来启动应用程序。Angular 组件与页面类似，用于设计和编程逻辑。

AppComponent (app.component.ts) 及其表示逻辑 (app.component.css) 的简单实现如下 -

应用程序组件.ts

import { Component } from "@angular/core"; 
@Component(
   {
      selector: "ns-app",
      templateUrl: "app.component.html"
   }
)
export class AppComponent { }

这里，

templateUrl指的是组件的设计。

应用程序组件.html

<page-router-outlet></page-router-outlet>

这里，

page-router-outlet是附加 Angular 应用程序的地方。

综上所述，Angular 框架由类似于 NativeScript 框架的模块组成，但略有不同。Angular 中的每个模块都会有一个 Angular 组件和一个路由器设置文件 (page-routing.mocdule.ts)。路由器是按模块设置的，它负责导航。Angular 组件类似于 NativeSctipt 核心中的页面。

每个组件都有一个 UI 设计 (page.component.html)、一个样式表 (page.component.css) 和一个 JavaScript/TypeScript 代码文件 (page.component.ts)。

NativeScript - 角度应用程序

让我们创建一个简单的基本应用程序来了解 NativeScript 应用程序的工作流程。

创建应用程序

让我们学习如何使用 NativeScript CLI、tns 创建简单的应用程序。tns 提供了一个命令 create 用于在 NativeScript 中创建新项目。

创建新应用程序的基本语法如下 -

tns create <projectname> --template <template_name>

在哪里，

项目名称是项目的名称。
template_name是项目模板。NativeScript提供了大量的启动模板来创建不同类型的应用程序。使用基于 Angular 的模板。

让我们创建一个名为 NativeScriptSamples 的新目录来处理我们的新应用程序。现在，打开一个新终端，然后移动到我们的目录并输入以下命令 -

tns create BlankNgApp --template tns-template-blank-ng

其中，tns-template-blank-ng指的是基于 AngularJS 的空白移动应用程序。

输出

..... 
..... 
..... 
Project BlankNgApp was successfully created. 
Now you can navigate to your project with $ cd BlankNgApp 
After that you can preview it on device by executing $ tns preview

现在，我们的第一个移动应用程序BlankNgApp已创建。

应用程序的结构

让我们通过分析本章中的第一个应用程序 BlankNgApp 来了解 NativeScript 应用程序的结构。NativeScript 应用程序分为多个部分，如下所示 -

配置部分
节点模块
安卓源
iOS 源
应用程序源代码

应用程序的一般结构如下 -

│ angular.json 
│ LICENSE 
│ nsconfig.json 
│ package-lock.json 
│ package.json 
│ tsconfig.json 
│ tsconfig.tns.json 
│ tsfmt.json 
│ webpack.config.js 
│
├───App_Resources 
│  ├───Android 
│  │ 
│  └───iOS 
│ 
├───hooks 
│ 
├───node_modules 
| 
└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
      │  app-routing.module.ts 
      │  app.component.html 
      │  app.component.ts 
      │  app.module.ts 
      │ 
      └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

让我们了解应用程序的每个部分以及它如何帮助我们创建应用程序。

配置部分

应用程序根目录中的所有文件都是配置文件。配置文件的格式为JSON格式，可以帮助开发者轻松了解配置细节。NativeScript 应用程序依赖这些文件来获取所有可用的配置信息。让我们浏览一下本节中的所有配置文件。

包.json

package.json 文件设置应用程序的身份 (id) 以及应用程序正常工作所依赖的所有模块。下面是我们的 package.json -

{ 
   "nativescript": {
      "id": "org.nativescript.BlankNgApp",
      "tns-android": {
         "version": "6.3.1"
      }, "tns-ios": {
         "version": "6.3.0"
      } 
   }, "description": "NativeScript Application", 
   "license": "SEE LICENSE IN <your-license-filename>", 
   "repository": "<fill-your-repository-here>", 
   "dependencies": { 
      "@angular/animations": "~8.2.0", 
      "@angular/common": "~8.2.0", 
      "@angular/compiler": "~8.2.0", 
      "@angular/core": "~8.2.0", 
      "@angular/forms": "~8.2.0", 
      "@angular/platform-browser": "~8.2.0", 
      "@angular/platform-browser-dynamic": "~8.2.0", 
      "@angular/router": "~8.2.0", 
      "@nativescript/theme": "~2.2.1", 
      "nativescript-angular": "~8.20.3", 
      "reflect-metadata": "~0.1.12", 
      "rxjs": "^6.4.0", 
      "tns-core-modules": "~6.3.0", 
      "zone.js": "~0.9.1" 
   }, 
   "devDependencies": { 
      "@angular/compiler-cli": "~8.2.0", 
      "@ngtools/webpack": "~8.2.0", 
      "nativescript-dev-webpack": "~1.4.0", 
      "typescript": "~3.5.3" 
   }, 
   "gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14", 
   "readme": "NativeScript Application" 
}

这里，

应用程序的身份 (nativescript/id) - 将应用程序的 id 设置为 org.nativescript.BlankNgApp。此 ID 用于将我们的应用程序发布到 Play Store 或 iTunes。该 ID 将是我们的应用程序标识符或包名称。

依赖项（dependency） - 指定我们所有依赖的节点模块。由于默认的 NativeScript 实现依赖于 Angular 框架，因此包含了 Angular 模块。

开发依赖项- 指定应用程序依赖的所有工具。由于我们正在使用 TypeScript 开发应用程序，因此它包含 TypeScript 作为依赖模块之一。

angular.json - Angular 框架配置信息。

nsconfig.json - NativeScript 框架配置信息。

tsconfig.json、tsfmt.json & tsconfig.tns.json - TypeScript 语言配置信息

webpack.config.js - 用 JavaScript 编写的 WebPack 配置。

节点模块

由于 NativeScript 项目是基于节点的项目，因此它将所有依赖项存储在 node_modules 文件夹中。我们可以使用 npm (npm install) 或 tns 下载所有应用程序依赖项并将其安装到 node_moduels 中。

安卓源代码

NativeScript 自动生成 android 源代码并将其放置在 App_Resources\Android 文件夹中。它将用于使用Android SDK创建 Android 应用程序

iOS 源代码

NativeScript 自动生成 iOS 源代码并将其放置在 App_Resources\iOS 文件夹中。它将用于使用 iOS SDK 和 XCode 创建 iOS 应用程序

应用程序源代码

实际的应用程序代码放置在 src 文件夹中。我们的应用程序在 src 文件夹中有以下文件。

└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
   │ app-routing.module.ts 
   │ app.component.html 
   │ app.component.ts 
   │ app.module.ts 
   │ 
   └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

让我们了解本节中所有文件的用途以及它们的组织方式 -

步骤1

main.ts - 应用程序的入口点。

// this import should be first in order to load some required settings (like globals and reflect-metadata) 
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

在这里，我们将 AppModule 设置为应用程序的引导模块。

第2步

app.css - 应用程序的主要样式表如下所示 -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

这里，

app.css 导入 NativeScript 框架的核心样式表和棕色主题样式表。

步骤3

app\app.module.ts - 应用程序的根模块。

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], 
      imports: [
         NativeScriptModule,
         AppRoutingModule
      ], 
      declarations: [
         AppComponent
      ], schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class AppModule { }

这里，

AppModule是基于NgModule创建的，设置应用程序的组件和模块。它导入两个模块 NativeScriptModule 和 AppRoutingModule 以及一个组件 AppComponent。它还将 AppComponent 设置为应用程序的根组件。

步骤4

app.component.ts - 应用程序的根组件。

import { Component } from "@angular/core"; 
@Component(
   { 
      selector: "ns-app", 
      templateUrl: "app.component.html" 
   }
) 
export class AppComponent { }

这里，

AppComponent 设置组件的模板和样式表。模板是使用 NativeScript UI 组件以简单的 HMTL 设计的。

步骤5

app-routing.module.ts - AppModule 的路由模块

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", loadChildren: () =>
   import("~/app/home/home.module").then((m) => m.HomeModule) } 
];
@NgModule(
   {
      imports: [NativeScriptRouterModule.forRoot(routes)], 
      exports: [NativeScriptRouterModule] 
   }
)
export class AppRoutingModule { }

这里，

AppRoutingModule 使用 NativeScriptRouterModule 并设置 AppModule 的路由。它基本上将空路径重定向到 /home 并将 /home 指向 HomeModule。

步骤6

app\home\home.module.ts - 定义一个新模块 HomeModule。

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
@NgModule(
   {
      imports: [
         NativeScriptCommonModule,
         HomeRoutingModule
      ],
      declarations: [
         HomeComponent
      ],
      schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class HomeModule { }

这里，

HomeModule 导入两个模块 HomeRoutingModule 和 NativeScriptCommonModule 以及一个组件 HomeComponent

步骤7

app\home\home.component.ts - 定义 Home 组件并用作应用程序的主页。

import { Component, OnInit } from "@angular/core";
@Component(
   {
      selector: "Home", templateUrl: "./home.component.html" 
   }
) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // Use the component constructor to inject providers. 
   } 
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
}

这里，

HomeComponent 设置 home 组件的模板和选择器。

步骤8

app\home\home-routing.module.ts - HomeModule 的路由模块，用于定义 home 模块的路由。

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
const routes: Routes = [
   { path: "", component: HomeComponent } 
]; 
@NgModule(
   { 
      imports: [NativeScriptRouterModule.forChild(routes)], 
      exports: [NativeScriptRouterModule] 
   }
) 
export class HomeRoutingModule { }

这里，

HomeRoutingModule 将空路径设置为 HomeComponent。

步骤9

app.component.html 和 home.component.html - 它们用于使用 NativeScript UI 组件设计应用程序的 UI。

运行您的应用程序

如果您想在不使用任何设备的情况下运行您的应用程序，请输入以下命令 -

tns preview

执行此命令后，将生成二维码以扫描并连接您的设备。

输出

二维码

现在二维码已生成，并在下一步中连接到 PlayGround。

NativeScript PlayGround

在 iOS 或 Android 手机上打开 NativeScript PlayGround 应用程序，然后选择扫描二维码选项。它将打开相机。聚焦控制台显示的二维码。这将扫描 QR 码。扫描二维码将触发应用程序构建，然后将应用程序同步到设备，如下所示 -

Copying template files... 
Platform android successfully added. v6.3.1 
Preparing project... 
File change detected. Starting incremental webpack compilation... 
webpack is watching the files… 
Hash: 1f38aaf6fcda4e082b88 
Version: webpack 4.27.1 
Time: 9333ms 
Built at: 01/04/2020 4:22:31 PM
               Asset          Size        Chunks         Chunk Names 
               0.js           8.32 KiB     0     [emitted] 
          bundle.js           22.9 KiB    bundle [emitted] bundle 
       package.json          112 bytes           [emitted] 
         runtime.js             73 KiB   runtime [emitted] runtime 
tns-java-classes.js            0 bytes  [emitted] 
          vendor.js            345 KiB   vendor  [emitted] vendor 
Entrypoint bundle = runtime.js vendor.js bundle.js 
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy 
namespace object 160 bytes {bundle} [built] [./app.css] 1.18 KiB {bundle} [built] [./app/app-routing.module.ts] 688 bytes {bundle} [built] 
[./app/app.component.html] 62 bytes {bundle} [built] 
[./app/app.component.ts] 354 bytes {bundle} [built] 
[./app/app.module.ts] 3.22 KiB {bundle} [built] 
[./app/home/home.module.ts] 710 bytes {0} [built] 
[./main.ts] 1.84 KiB {bundle} [built] 
[@angular/core] external "@angular/core" 42 bytes {bundle} [built] [nativescript-angular/nativescript.module] external "nativescript-
angular/nativescript.module" 42 bytes {bundle} [built] 
[nativescript-angular/platform] external "nativescript-angular/platform" 42 
bytes {bundle} [built] [tns-core-modules/application] external "tns-core-
modules/application" 42 bytes {bundle} [built] 
[tns-core-modules/bundle-entry-points] external "tns-core-modules/bundle-entry-points" 42 
bytes {bundle} [built] 
[tns-core-modules/ui/frame] external "tns-core-
modules/ui/frame" 42 bytes {bundle} [built] 
[tns-core-modules/ui/frame/activity] external "tns-core-
modules/ui/frame/activity" 42 bytes {bundle} [built] 
   + 15 hidden modules Webpack compilation complete. Watching for file changes. 
Webpack build done! 
Project successfully prepared (android) 
Start sending initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-
b02f-3dc6d4ee0e1f). 
Successfully sent initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-b02f-3dc6d4ee0e1f). 
LOG from device Bala Honor Holly: HMR: Hot Module Replacement Enabled. Waiting for signal. 
LOG from device Bala Honor Holly: Angular is running in the development mode. 
Call enableProdMode() to enable the production mode.

输出

扫描后，您应该在设备上看到 BlankNgApp。如下所示 -

在设备上运行您的应用程序

如果您想在应用程序中测试连接的设备，您可以使用以下语法进行验证 -

'tns device <Platform> --available-devices'

之后，您可以使用以下命令执行您的应用程序 -

tns run

上述命令用于在本地构建应用程序并安装在 Andriod 或 iOS 设备上。如果您想在 Android 模拟器上运行您的应用程序，请输入以下命令 -

tns run android

对于 iOS 设备，您可以按照以下命令操作 -

tns run ios

这将在 Android/iOS 设备中初始化应用程序。我们将在接下来的章节中更详细地讨论这个问题。

实时同步

NativeScript 提供将应用程序中的更改实时同步到预览应用程序的功能。让我们使用您最喜欢的任何编辑器打开该项目（Visual Studio Code 将是更好可视化的理想选择）。让我们在代码中添加一些更改，看看 LiveSync 中如何检测到这些更改。

现在打开文件 app.css，它将包含以下内容 -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/blue.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

在这里，导入语句告诉我们应用程序的配色方案。让我们将蓝色配色方案更改为棕色配色方案，如下所示 -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

我们设备中的应用程序刷新，您应该看到一个棕色的 ActionBar，如下所示 -

输出

以下是 BlankNgApp 主页 - 棕色主题。

NativeScript - 模板

NativeScript 提供了许多现成的模板来创建简单的空白但功能齐全的应用程序到复杂的基于选项卡的应用程序。

使用模板

如前所述，可以使用tns 命令的create子命令创建新应用程序。

tns create <app-name> --template <tns-template-name>

这里，

tns-template-name是模板的名称。

如果您想使用 JavaScript 创建一个包含一页且没有任何自定义样式的模板，请使用以下命令 -

tns create <app-name> --template tns-template-blank

可以使用 TypeScript 创建上述相同的模板，如下所示 -

tns create <app-name> --template tns-template-blank-ts

导航模板

导航模板用于创建中等到复杂的应用程序。它配备了带有多个页面的预配置SideDrawer组件。SideDrawer组件包含导航 UI 或常用设置的隐藏视图。使用以下命令创建基于导航的应用程序 -

tns create <app-name> --template tns-template-drawer-navigation

选项卡导航模板

选项卡导航模板用于创建基于选项卡的应用程序。它配备了带有多个页面的预配置TabView组件。使用以下命令创建基于选项卡的应用程序 -

tns create <app-name> --template tns-template-tab-navigation

主从模板

主从模板用于创建基于列表的应用程序以及列表中每个项目的详细信息页面。

tns create <app-name> --template tns-template-master-detail

自定义模板

要创建简单的自定义模板，我们需要克隆空白模板。如您所知，NativeScript 支持 JavaScript、TypeScript、Angular 和 Vue.js 模板，因此您可以选择任何语言并创建您的自定义语言。

例如，使用以下命令从 git 存储库克隆简单和自定义的模板 -

git clone https://github.com/NativeScript/template-blank-ts.git

现在，它将创建移动应用程序结构，以便您可以进行任何更改并运行您的 Android/iOS 设备。该结构基于指南列表。让我们简要地看看这些指南。

结构

您的定制模板必须满足以下要求 -

不要将代码放在应用程序根文件夹中。
创建一个单独的文件夹并在其中添加功能区域。
页面、视图模型和服务应放置在功能区。这有助于创建整洁干净的代码。
创建页面文件夹并放入.ts、.xml、.scss/css 等文件。

包.json

将 package.json 文件放置在应用程序模板的根文件夹中。使用格式为 name 属性提供一个值 -

{
   "name": "tns-template-blank-ts", 
   displayName": "template-blank", 
}

为版本属性分配一个值。它的定义如下 -

"version": "3.2.1",

为主属性分配一个值，指定应用程序的主要入口点。它的定义如下 -

"main": "app.js",

为 android 属性分配一个值。它的定义如下 -

"android": { 
   "v8Flags": "--expose_gc" 
},

应在代码中指定存储库属性，如下所示 -

"repository": { 
   "type": "git", 
   "url": "https://github.com/NativeScript/template-master-detail-ts" 
},

风格

使用以下语法在应用程序模板中导入样式和主题 -

@import '~nativescript-theme-core/scss/light';

我们还可以使用以下代码指定自定义背景颜色 -

/* Colors */ 
$background: #fff; 
$primary: lighten(#000, 13%);

NativeScript - 小部件

NativeScript 提供了大量的用户界面组件，称为“小部件”。每个小部件都执行一项特殊任务并附带一组方法。让我们在本节中详细了解 NativeScript 小部件。

按钮

Button 是执行点击事件动作的组件。当用户点击按钮时，它会执行相应的操作。它的定义如下 -

<Button text="Click here!" tap="onTap"></Button>

让我们在 BlankNgApp 中添加按钮，如下所示 -

步骤1

打开src\app\home\home.component.html。这是我们的 home 组件的 UI 设计页面。

第2步

在GirdLayout组件内添加一个按钮。完整代码如下 -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!"></button> 
</GridLayout>

输出

以下是按钮的输出 -

步骤3

我们可以使用 CSS 设置按钮的样式，如下所示 -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!" class="-primary"></button> 
</GridLayout>

这里，-primary类用于表示主按钮。

输出

以下是ButtonPrimary的输出-

步骤4

NativeScript 提供格式化选项以在按钮中提供自定义图标。示例代码如下 -

<GridLayout> 
   <Button class="-primary"> 
      <FormattedString> 
         <Span text="&#xf099;" class="fa"></Span> 
         <Span text=" Button.-primary with icon"></Span> 
      </FormattedString> 
   </Button> 
</GridLayout>
.fa {
   font-family: "FontAwesome", "fontawesome-webfont";
}

这里，

 指定图标在字体 FontAwesome 中的位置。下载最新的 Font Awesome 字体并将 fontawesome-webfont.ttf 放在 src\fonts 文件夹中。

输出

以下是ButtonPrimary的输出-

步骤5

可以使用以下语法创建圆形按钮 -

<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>

输出

以下是 ButtonPrimary 的输出 -

文本域

TextField 组件用于从用户获取信息。让我们更改我们的主页，如下所示 -

<GridLayout> 
   <TextField hint="Username" 
      color="lightblue" 
      backgroundColor="lightyellow" 
      height="75px">
   </TextField> 
</GridLayout>

这里，

color 代表文字颜色
backgroundColor代表文本框的背景
height表示文本框的高度

输出

以下是文本字段的输出 -

文本视图

TextView组件用于从用户获取多行文本内容。让我们更改我们的主页，如下所示 -

<GridLayout> 
   <TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100"> 
   </TextView> 
</GridLayout>

这里， maxLength 表示TextView接受的最大长度。

输出

以下是 TextView 的输出 -

搜索栏

该组件用于搜索任何查询或提交任何请求。它的定义如下 -

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..."></SearchBar> 
<StackLayout>

我们可以应用样式 -

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar> 
</StackLayout>

以下是 SearchBarStyle 的输出 -

转变

Switch是基于toggle来在选项之间进行选择的。默认状态为 false。它的定义如下 -

<StackLayout> 
   <Switch checked="false" loaded="onSwitchLoaded"></Switch> 
</StackLayout>

上述程序的输出如下所示 -

滑块

Slider 是一个用于选择数值范围的滑动组件。它的定义如下 -

<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>

上述程序的输出如下 -

进步

进度小部件指示操作的进度。当前进度以条形表示。它的定义如下 -

<StackLayout verticalAlign="center" height="50"> 
   <Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress>
</StackLayout>

以下是进度小部件的输出 -

活动指示器

ActivityIndicator 显示正在进行的任务。它的定义如下 -

<StackLayout verticalAlign="center" height="50"> 
   <ActivityIndicator busy="true" color="red" width="50" 
   height="50"></ActivityIndicator> 
</StackLayout>

以下是 ActivityIndicator 的输出 -

图像

图像小部件用于显示图像。可以使用“ImageSource”url 加载它。它的定义如下 -

<StackLayout class="m-15" backgroundColor="lightgray">
   <Image src="~/images/logo.png" stretch="aspectFill"></Image> 
</StackLayout>

图像小部件的输出如下所示 -

网页视图

WebView 显示网页。可以使用 URL 加载网页。它的定义如下 -

<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>

上述代码的输出如下所示 -

日期选择器

DatePicker 组件用于选择日期。它的定义如下 -

<StackLayout class="m-15" backgroundColor="lightgray"> 
   <DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker> 
</StackLayout>

DatePicker 组件的输出如下所示 -

时间选择器

TimePicker 组件用于选择时间。它的定义如下 -

<StackLayout class="m-15" backgroundColor="lightgray"> 
<TimePicker hour="9" 
   minute="25" 
   maxHour="23" 
   maxMinute="59" 
   minuteInterval="5"> 
</TimePicker> 
</StackLayout>

以下是 TimePicker 组件的输出 -

NativeScript - 布局容器

NativeScript 提供容器组件的集合，其唯一目的是布局 UI 小部件组件。布局容器充当父组件，并且可以具有一个或多个子组件。布局容器的所有子组件都可以根据其父布局容器提供的技术进行排列。

NativeScript 支持六种布局容器，它们如下 -

绝对布局容器
码头布局容器
网格布局容器
堆栈布局容器
包裹布局容器
FlexBox布局容器

让我们在本章中详细学习所有布局容器概念。

绝对布局

AbsoluteLayout容器是 NativeScript 中最简单的布局容器。AbsoluteLayout 不会对其子级施加任何约束，而是使用以左上角为原点的二维坐标系将其子级放置在其中。

AbsoluteLayout 使用其子级的四个属性来定位它们，如下所示 -

top - 定义子项从原点沿 y 方向向下移动的位置。

left - 定义子项从原点沿 x 方向向侧面移动的位置。

width - 定义子项的宽度。

height - 定义孩子的身高。

让我们在应用程序的主页中添加 AbsoluteLayout 容器，如下所示 -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

输出

AbsoluteLayout 的输出如下所示 -

Dock布局

Docklayout容器组件使其子组件能够停靠在其中。容器的每一侧（上、下、左、右）都可以停靠一个子组件。DockLayout 容器使用其子级的停靠属性来正确停靠它们。

码头属性的可能值如下 -

top - 布局容器将子组件停靠在顶角。

底部- 布局容器将子组件停靠在底角。

left - 布局容器将子组件停靠在左上角。

right - 布局容器将子组件停靠在右上角。

默认情况下，DockLayout容器停靠其最后一个子组件。它可以通过将其stretchLastChild属性设置为零来覆盖。

让我们在应用程序的主页中添加DockLayout容器，如下所示 -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

输出

以下是 DockLayout 的输出 -

网格布局

GridLayout 容器组件是复杂布局容器之一，它以行和列的表格格式排列子元素。默认情况下，它具有一行和一列。它具有以下属性 -

columns - 用于表示由 , 分隔的每列的默认宽度。可能的值为数字、* 和 auto 关键字。

在哪里，

数字表示绝对列宽。
指示一列相对于其他列的宽度。它前面可以加上数字，以指示列宽应相对于其他列的多少倍。例如，2* 表示列的宽度应为最小列宽度的 2 倍。
auto 表示列的宽度与其最宽的子列一样宽。

例如，*,2* 表示两列，第二列的大小是第一列的两倍。

rows - 用于表示由 , 分隔的每行的默认高度。值表示类似于列。

GridLayout 使用其子级的以下指定属性来布局它们 -

行- 行号

col - 列号

rowSpan - 子内容在布局中跨越的总行数。

colSpan - 子内容在布局中跨越的总列数。

让我们在应用程序的主页中添加 GridLayout 容器，如下所示 -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

输出

以下是 GridLayout 的输出 -

堆栈布局

StackLayout 将其子级水平或垂直组织在一维行中。可以使用布局选项根据布局中的空间调整其大小。它具有方向属性，可用于指定方向，水平或垂直。

让我们在应用程序的主页中添加 StackLayout 容器，如下所示 -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

输出

StackLayout 的输出如下所示 -

换行布局

WrapLayout 用于将内容包装在新行或新列上。

它具有以下三个属性 -

方向- 水平或垂直显示。

itemWidth - 每个子项的布局宽度。

itemHeight - 每个子项的布局高度。

让我们在应用程序的主页中添加 WrapLayout 容器，如下所示 -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

输出

弹性盒布局

FlexboxLayout容器组件是高级布局容器之一。它提供了将简单布局呈现为非常复杂和精致的布局的选项。它基于 CSS Flexbox。

FlexboxLayout 组件有很多属性，如下所示 -

弹性方向

它表示子组件的排列方向。flexDirection 的可能值如下 -

row - 子组件并排排列。

row-reverse - 子组件并排排列，但方向相反。

column - 子组件排列在另一个组件的下方。

column-reverse - 子组件按相反方向排列在另一个组件下方。

让我们在应用程序的主页中添加 FlexLayout 容器，如下所示 -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

输出

以下是 FlexLayout – Row 的输出 -

现在，让我们将 flexDirection 值从 row 更改为 row-reverse 并检查它如何影响布局。

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label tex

NativeScript - 快速指南

NativeScript - 简介

JavaScript 框架概述

角

Vue.js

反应

Node.js

NativeScript 概述

特征

好处

NativeScript - 安装

先决条件

验证 Node.js

CLI 设置

安装程序

命令行

安装 NativeScript Playground 应用程序

Android 和 iOS 设置

第 1 步：Windows 依赖项

第 2 步：macOS 依赖项

第三步：Android依赖

第 4 步：验证依赖关系

NativeScript - 架构

介绍

NativeScript 应用程序的工作流程

根模块

页面模块

基于 Angular 的 NativeScript 应用程序的工作流程

步骤1

第2步

NativeScript - 角度应用程序

创建应用程序

输出

应用程序的结构

配置部分

包.json

节点模块

安卓源代码

iOS 源代码

应用程序源代码

步骤1

第2步

步骤3

步骤4

步骤5

步骤6

步骤7

步骤8

步骤9

运行您的应用程序

输出

NativeScript PlayGround

输出

在设备上运行您的应用程序

实时同步

输出

NativeScript - 模板

使用模板

导航模板

选项卡导航模板

主从模板

自定义模板

结构

包.json

风格

NativeScript - 小部件

按钮

步骤1

第2步

输出

步骤3

输出

步骤4

输出

步骤5

输出

标签

输出

文本域

输出