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

列印頁面