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 设备。该结构基于指南列表。让我们简要地看看这些指南。

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

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