NativeScript - Modelli

NativeScript fornisce molti modelli già pronti per creare semplici applicazioni vuote ma completamente funzionali per complesse applicazioni basate su schede.

Utilizzando il modello

Come appreso in precedenza, è possibile creare una nuova applicazione utilizzando create sottocomando del comando tns.

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

Qui,

tns-template-name è il nome del modello.

Se desideri creare un modello con una pagina e senza stili personalizzati utilizzando JavaScript, utilizza il comando seguente:

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

Lo stesso modello sopra può essere creato utilizzando TypeScript come segue:

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

Modello di navigazione

Il modello di navigazione viene utilizzato per creare un'applicazione da moderata a complessa. Viene fornito con preconfiguratoSideDrawer componente con più pagine. SideDrawerIl componente contiene una vista nascosta per l'interfaccia utente di navigazione o le impostazioni comuni. Usa il comando seguente per creare un'applicazione basata sulla navigazione:

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

Modello di navigazione delle schede

Il modello di navigazione a schede viene utilizzato per creare un'applicazione basata su schede. Viene fornito con preconfiguratoTabViewcomponente con più pagine. Usa il comando seguente per creare un'applicazione basata su schede -

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

Modello Master-Detail

Il modello Master-Detail viene utilizzato per creare un'applicazione basata su elenco insieme alla pagina dei dettagli per ogni elemento nell'elenco.

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

Modello personalizzato

Per creare un semplice modello personalizzato, dobbiamo clonare modelli vuoti. Come già sai, NativeScript supporta i modelli JavaScript, TypeScript, Angular e Vue.js in modo da poter scegliere qualsiasi lingua e crearne una personalizzata.

Ad esempio, clona un modello semplice e personalizzato dal repository git utilizzando il comando seguente:

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

Ora creerà la struttura dell'app mobile in modo da poter apportare eventuali modifiche ed eseguire il tuo dispositivo Android / iOS. Questa struttura si basa su un elenco di linee guida. Vediamo in breve le linee guida.

Struttura

Il tuo modello personalizzato deve soddisfare i seguenti requisiti:

• Non inserire il codice nella cartella principale della tua app.

• Crea una cartella separata e aggiungi l'area delle funzionalità all'interno.

• Pagina, Visualizza modelli e servizio devono essere posizionati nell'area delle funzionalità. Questo aiuta a creare codice ordinato e pulito.

• Crea la cartella della pagina e posiziona all'interno dei file .ts, .xml, .scss / css, ecc .

package.json

Inserisci il file package.json nella cartella principale del tuo modello di app. Fornisci un valore per la proprietà name utilizzando il formato -

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

Assegna un valore alla proprietà version. È definito di seguito:

"version": "3.2.1",

Assegna un valore alla proprietà principale specificando il punto di ingresso principale della tua app. È definito di seguito:

"main": "app.js",

Assegna un valore alla proprietà Android. È definito di seguito:

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

La proprietà del repository dovrebbe essere specificata all'interno del codice come segue:

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

Stile

Importa stili e temi nel tuo modello di app utilizzando la sintassi seguente:

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

Possiamo anche assegnare un colore di sfondo personalizzato utilizzando il codice seguente:

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