NativeScript-テンプレート

NativeScriptは、複雑なタブベースのアプリケーションに対して、単純な空白でありながら完全に機能するアプリケーションを作成するための既製のテンプレートを多数提供します。

テンプレートを使用する

前に学んだように、新しいアプリケーションはを使用して作成できます create tnsコマンドのサブコマンド。

tns create <app-name> --template <tns-template-name>

ここに、

tns-template-name テンプレートの名前です。

JavaScriptを使用して、1ページでカスタムスタイルのないテンプレートを作成する場合は、次のコマンドを使用します-

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デバイスを実行できます。この構造はガイドラインのリストに基づいています。ガイドラインを簡単に見てみましょう。

構造

カスタマイズしたテンプレートは、次の要件を満たしている必要があります-

アプリのルートフォルダー内にコードを配置しないでください。
別のフォルダを作成し、その中に機能領域を追加します。
ページ、ビューモデル、およびサービスは、機能領域に配置する必要があります。これは、きちんとしたクリーンなコードを作成するのに役立ちます。
ページフォルダを作成し、.ts、.xml、.scss / cssなどのファイル内に配置します。

package.json

package.jsonファイルをアプリテンプレートのルートフォルダーに配置します。形式-を使用してnameプロパティの値を指定します

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

versionプロパティに値を割り当てます。以下に定義されています-

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