NativeScript - Plantillas

NativeScript proporciona una gran cantidad de plantillas listas para usar para crear aplicaciones en blanco simples pero completamente funcionales para aplicaciones complejas basadas en pestañas.

Usando plantilla

Como se aprendió anteriormente, se puede crear una nueva aplicación usando create subcomando del comando tns.

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

Aquí,

tns-template-name es el nombre de la plantilla.

Si desea crear una plantilla con una página y sin estilos personalizados usando JavaScript, use el siguiente comando:

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

La misma plantilla anterior se puede crear usando TypeScript de la siguiente manera:

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

Plantilla de navegación

La plantilla de navegación se utiliza para crear aplicaciones de moderadas a complejas. Viene con preconfiguradoSideDrawer componente con varias páginas. SideDrawerEl componente contiene una vista oculta para la interfaz de usuario de navegación o la configuración común. Use el siguiente comando para crear una aplicación basada en navegación:

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

Plantilla de navegación de pestañas

La plantilla de navegación por pestañas se utiliza para crear aplicaciones basadas en pestañas. Viene con preconfiguradoTabViewcomponente con varias páginas. Utilice el siguiente comando para crear una aplicación basada en pestañas:

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

Plantilla de detalle maestro

La plantilla Master-Detail se utiliza para crear una aplicación basada en listas junto con una página de detalles para cada elemento de la lista.

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

Plantilla personalizada

Para crear una plantilla personalizada simple, necesitamos clonar plantillas en blanco. Como ya sabe, NativeScript es compatible con las plantillas JavaScript, TypeScript, Angular y Vue.js para que pueda elegir cualquier idioma y crear uno personalizado.

Por ejemplo, clone una plantilla simple y personalizada desde el repositorio de git usando el siguiente comando:

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

Ahora, creará la estructura de la aplicación móvil para que pueda hacer cualquier cambio y ejecutar su dispositivo Android / iOS. Esta estructura se basa en la lista de pautas. Veamos brevemente las pautas.

Estructura

Su plantilla personalizada debe cumplir los siguientes requisitos:

• No coloques tu código dentro de la carpeta raíz de tu aplicación.

• Cree una carpeta separada y agregue un área de características adentro.

• La página, los modelos de vista y el servicio deben colocarse en el área de características. Esto ayuda a crear un código limpio y ordenado.

• Crear carpeta de la página y el lugar en el interior Ts, .xml, .scss / css, etc. , archivos.

package.json

Coloque el archivo package.json en la carpeta raíz de la plantilla de su aplicación. Proporcione un valor para la propiedad del nombre usando el formato -

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

Asigne un valor a la propiedad de la versión. Se define a continuación:

"version": "3.2.1",

Asigne un valor para la propiedad principal que especifique el punto de entrada principal a su aplicación. Se define a continuación:

"main": "app.js",

Asigne un valor a la propiedad de Android. Se define a continuación:

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

La propiedad del repositorio debe especificarse dentro de su código de la siguiente manera:

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

Estilo

Importe estilos y temas en la plantilla de su aplicación utilizando la siguiente sintaxis:

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

También podemos asignar un color de fondo personalizado usando el siguiente código:

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