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

选项卡导航模板用于创建基于选项卡的应用程序。它带有预配置的 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 设备。此结构基于指南列表。让我们简要了解一下指南。

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

将 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": { 
   "type": "git", 
   "url": "https://github.com/NativeScript/template-master-detail-ts" 
},

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

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

我们还可以使用以下代码分配自定义背景颜色 −

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