NativeScript - шаблоны

NativeScript предоставляет множество готовых шаблонов для создания простых пустых, но полностью функциональных приложений для сложных приложений на основе вкладок.

Использование шаблона

Как было сказано ранее, новое приложение можно создать с помощью create подкоманда команды tns.

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Компонент содержит скрытый вид для пользовательского интерфейса навигации или общих настроек. Используйте приведенную ниже команду для создания приложения на основе навигации -

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

Шаблон навигации по вкладкам

Шаблон навигации по вкладкам используется для создания приложения на основе вкладок. Поставляется с предварительно настроеннымиTabViewкомпонент с несколькими страницами. Используйте команду ниже для создания приложения на основе вкладок -

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

Мастер-подробный шаблон

Шаблон Master-Detail используется для создания приложения на основе списка вместе со страницей сведений для каждого элемента в списке.

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