📜  NativeScript-模板

📅  最后修改于: 2020-12-08 05:49:17             🧑  作者: Mango


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

使用模板

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

tns create  --template 

这里,

tns-template-name模板的名称

如果要使用JavaScript创建一个页面且没有任何自定义样式的模板,请使用以下命令-

tns create  --template tns-template-blank

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

tns create  --template tns-template-blank-ts

导航模板

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

tns create  --template tns-template-drawer-navigation

标签导航模板

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

tns create  --template tns-template-tab-navigation

主从模板

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

tns create  --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等文件中。

package.json

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

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

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

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