NativeScript - 模板

NativeScript 提供了许多现成的模板，可以用来创建从简单的空白应用程序到复杂的基于 Tab 的应用程序。

使用模板

如前所述，可以使用 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

Tab 导航模板用于创建基于 Tab 的应用程序。它预配置了 TabView 组件和多个页面。使用以下命令创建基于 Tab 的应用程序：

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 设备。此结构基于一系列准则。让我们简要了解一下这些准则。

您的自定义模板必须满足以下要求：

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

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

为 version 属性赋值。定义如下：

"version": "3.2.1",

为 main 属性赋值，指定应用程序的主要入口点。定义如下：

"main": "app.js",

为 android 属性赋值。定义如下：

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

应在您的代码中按如下方式指定 repository 属性：

"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%);

打印页面