NativeScript-テンプレート

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

テンプレートを使用する

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

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

Nativescript-templates

目次