NativeScript - Modèles

NativeScript fournit de nombreux modèles prêts à l'emploi pour créer une application vierge simple mais entièrement fonctionnelle vers une application complexe basée sur des onglets.

Utilisation du modèle

Comme appris précédemment, une nouvelle application peut être créée en utilisant create sous-commande de la commande tns.

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

Ici,

tns-template-name est le nom du modèle.

Si vous souhaitez créer un modèle avec une page et sans styles personnalisés à l'aide de JavaScript, utilisez la commande ci-dessous -

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

Le même modèle ci-dessus peut être créé en utilisant TypeScript comme suit -

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

Modèle de navigation

Le modèle de navigation est utilisé pour créer une application modérée à complexe. Il est livré avecSideDrawer composant avec plusieurs pages. SideDrawerLe composant contient une vue masquée pour l'interface utilisateur de navigation ou les paramètres communs. Utilisez la commande ci-dessous pour créer une application basée sur la navigation -

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

Modèle de navigation par onglets

Le modèle de navigation par onglets est utilisé pour créer une application basée sur des onglets. Il est livré avecTabViewcomposant avec plusieurs pages. Utilisez la commande ci-dessous pour créer une application basée sur un onglet -

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

Modèle principal-détail

Le modèle Master-Detail est utilisé pour créer une application basée sur une liste avec une page de détail pour chaque élément de la liste.

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

Modèle personnalisé

Pour créer un modèle personnalisé simple, nous devons cloner des modèles vierges. Comme vous le savez déjà, NativeScript prend en charge les modèles JavaScript, TypeScript, Angular et Vue.js afin que vous puissiez choisir n'importe quel langage et créer votre langage personnalisé.

Par exemple, clonez un modèle simple et personnalisé à partir du référentiel git en utilisant la commande ci-dessous -

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

Maintenant, il créera la structure de l'application mobile afin que vous puissiez effectuer des modifications et exécuter votre appareil Android / iOS. Cette structure basée sur une liste de lignes directrices. Voyons les lignes directrices en bref.

Structure

Votre modèle personnalisé doit répondre aux exigences suivantes -

• Ne placez pas votre code dans le dossier racine de votre application.

• Créez un dossier séparé et ajoutez une zone de fonctionnalités à l'intérieur.

• Les modèles de page, de vue et de service doivent être placés dans la zone des fonctionnalités. Cela aide à créer un code net et propre.

• Créer un dossier de page et place à l' intérieur .ts, .xml, .scss / css, etc. , les fichiers.

package.json

Placez le fichier package.json dans le dossier racine de votre modèle d'application. Fournissez une valeur pour la propriété name en utilisant le format -

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

Attribuez une valeur à la propriété version. Il est défini ci-dessous -

"version": "3.2.1",

Attribuez une valeur à la propriété principale en spécifiant le point d'entrée principal de votre application. Il est défini ci-dessous -

"main": "app.js",

Attribuez une valeur à la propriété android. Il est défini ci-dessous -

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

La propriété du référentiel doit être spécifiée dans votre code comme suit -

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

Style

Importez des styles et des thèmes dans votre modèle d'application en utilisant la syntaxe ci-dessous -

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

Nous pouvons également attribuer une couleur d'arrière-plan personnalisée en utilisant le code ci-dessous -

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