NativeScript - Şablonlar

NativeScript, karmaşık Tab tabanlı uygulamalara basit, boş ama tamamen işlevsel bir uygulama oluşturmak için birçok hazır şablon sağlar.

Şablon kullanma

Daha önce öğrenildiği gibi, yeni uygulama kullanılarak oluşturulabilir create tns komutunun alt komutu.

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

Buraya,

tns-template-name şablonun adıdır.

Tek sayfalı ve JavaScript kullanarak herhangi bir özel stil içermeyen bir şablon oluşturmak istiyorsanız, aşağıdaki komutu kullanın -

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

Yukarıdaki aynı şablon, aşağıdaki gibi TypeScript kullanılarak oluşturulabilir -

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

Gezinme Şablonu

Gezinme şablonu, orta ila karmaşık uygulama oluşturmak için kullanılır. Önceden yapılandırılmış olarak gelirSideDrawer birkaç sayfalı bileşen. SideDrawerbileşeni, gezinme kullanıcı arayüzü veya ortak ayarlar için gizli bir görünüm içerir. Navigasyon tabanlı uygulama oluşturmak için aşağıdaki komutu kullanın -

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

Sekme Gezinme Şablonu

Sekme gezinme şablonu, sekme tabanlı uygulama oluşturmak için kullanılır. Önceden yapılandırılmış olarak gelirTabViewbirkaç sayfalı bileşen. Sekme tabanlı uygulama oluşturmak için aşağıdaki komutu kullanın -

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

Ana Ayrıntı Şablonu

Master-Detail şablonu, listedeki her öğe için detay sayfası ile birlikte liste bazlı uygulama oluşturmak için kullanılır.

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

Özel Şablon

Basit özelleştirilmiş şablon oluşturmak için boş şablonları klonlamamız gerekir. Zaten bildiğiniz gibi, NativeScript JavaScript, TypeScript, Angular ve Vue.js şablonlarını destekler, böylece herhangi bir dili seçebilir ve kendi özel dilinizi oluşturabilirsiniz.

Örneğin, aşağıdaki komutu kullanarak git deposundan basit ve özelleştirilmiş şablonu klonlayın -

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

Şimdi, herhangi bir değişikliği yapabilmeniz ve android / iOS cihazınızı çalıştırabilmeniz için mobil uygulama yapısı oluşturacaktır. Bu yapı, kılavuzlar listesine dayanmaktadır. Yönergeleri kısaca görelim.

Yapısı

Özelleştirilmiş şablonunuz aşağıdaki gereksinimleri karşılamalıdır -

Kodunuzu uygulama kök klasörünüzün içine yerleştirmeyin.
Ayrı bir klasör oluşturun ve içine özellik alanı ekleyin.
Özellik alanına Sayfa, Görünüm modelleri ve hizmet yerleştirilmelidir. Bu, düzgün ve temiz kod oluşturmaya yardımcı olur.
Sayfa klasörü oluşturun ve .ts, .xml, .scss / css vb . Dosyaların içine yerleştirin.

package.json

Package.json dosyasını uygulama şablonunuzun kök klasörüne yerleştirin. Şu biçimi kullanarak name özelliği için bir değer sağlayın -

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

Version özelliği için bir değer atayın. Aşağıda tanımlanmıştır -

"version": "3.2.1",

Uygulamanıza birincil giriş noktasını belirterek ana mülk için bir değer atayın. Aşağıda tanımlanmıştır -

"main": "app.js",

Android özelliği için bir değer atayın. Aşağıda tanımlanmıştır -

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

Kod deposu özelliği, kodunuzun içinde aşağıdaki gibi belirtilmelidir -

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

Tarzı

Aşağıdaki sözdizimini kullanarak uygulama şablonunuzdaki stilleri ve temaları içe aktarın -

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

Aşağıdaki kodu kullanarak özel arka plan rengi de atayabiliriz -

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