NativeScript - modelos

NativeScript fornece muitos modelos prontos para criar aplicativos simples em branco, mas totalmente funcionais, para aplicativos complexos baseados em Tab.

Usando modelo

Conforme aprendido anteriormente, um novo aplicativo pode ser criado usando create subcomando do comando tns.

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

Aqui,

tns-template-name é o nome do modelo.

Se você deseja criar um modelo com uma página e sem estilos personalizados usando JavaScript, use o comando abaixo -

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

O mesmo modelo acima pode ser criado usando TypeScript da seguinte maneira -

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

Modelo de Navegação

O modelo de navegação é usado para criar aplicativos moderados a complexos. Vem com pré-configuradoSideDrawer componente com várias páginas. SideDrawercomponente contém uma visão oculta para a IU de navegação ou configurações comuns. Use o comando abaixo para criar um aplicativo baseado em navegação -

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

Modelo de navegação de guia

O modelo de navegação por guia é usado para criar aplicativos baseados em guias. Vem com pré-configuradoTabViewcomponente com várias páginas. Use o comando abaixo para criar um aplicativo baseado em guia -

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

Modelo de Detalhe Mestre

O modelo Master-Detail é usado para criar um aplicativo baseado em lista junto com a página de detalhes para cada item na lista.

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

Modelo Personalizado

Para criar um modelo personalizado simples, precisamos clonar modelos em branco. Como você já sabe, NativeScript oferece suporte a modelos JavaScript, TypeScript, Angular e Vue.js para que você possa escolher qualquer linguagem e criar a sua personalizada.

Por exemplo, clone um modelo simples e personalizado do repositório git usando o comando abaixo -

git clone https://github.com/NativeScript/template-blank-ts.git

Agora, ele criará uma estrutura de aplicativo móvel para que você possa fazer qualquer alteração e executar seu dispositivo Android / iOS. Esta estrutura é baseada em lista de diretrizes. Vamos ver as diretrizes resumidamente.

Estrutura

Seu modelo personalizado deve atender aos seguintes requisitos -

Não coloque o código dentro da pasta raiz do aplicativo.
Crie uma pasta separada e adicione uma área de recurso dentro dela.
Página, modelos de visualização e serviço devem ser colocados na área de recurso. Isso ajuda a criar um código limpo e organizado.
Criar pasta página e coloque dentro Ts, .xml .scss / css, etc. , arquivos.

package.json

Coloque o arquivo package.json na pasta raiz do seu modelo de aplicativo. Forneça um valor para a propriedade de nome usando o formato -

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

Atribua um valor para a propriedade da versão. É definido abaixo -

"version": "3.2.1",

Atribua um valor para a propriedade principal especificando o ponto de entrada principal para seu aplicativo. É definido abaixo -

"main": "app.js",

Atribua um valor para a propriedade android. É definido abaixo -

"android": { 
   "v8Flags": "--expose_gc" 
},

A propriedade do repositório deve ser especificada dentro do seu código da seguinte maneira -

"repository": { 
   "type": "git", 
   "url": "https://github.com/NativeScript/template-master-detail-ts" 
},

Estilo

Importe estilos e temas em seu modelo de aplicativo usando a sintaxe abaixo -

@import '~nativescript-theme-core/scss/light';

Também podemos atribuir cor de fundo personalizada usando o código abaixo -

/* Colors */ 
$background: #fff; 
$primary: lighten(#000, 13%);