NativeScript - Mẫu

NativeScript cung cấp rất nhiều mẫu tạo sẵn để tạo ứng dụng trống đơn giản nhưng đầy đủ chức năng cho ứng dụng dựa trên Tab phức tạp.

Sử dụng mẫu

Như đã học trước đó, ứng dụng mới có thể được tạo bằng create lệnh con của lệnh tns.

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

Đây,

tns-template-name là tên của mẫu.

Nếu bạn muốn tạo một mẫu với một trang và không có bất kỳ kiểu tùy chỉnh nào bằng JavaScript, hãy sử dụng lệnh dưới đây:

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

Có thể tạo cùng một mẫu ở trên bằng TypeScript như sau:

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

Mẫu điều hướng

Mẫu điều hướng được sử dụng để tạo ứng dụng vừa phải đến phức tạp. Nó đi kèm với cấu hình sẵnSideDrawer thành phần với một số trang. SideDrawerthành phần chứa chế độ xem ẩn cho giao diện người dùng điều hướng hoặc cài đặt chung. Sử dụng lệnh dưới đây để tạo ứng dụng dựa trên điều hướng -

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

Mẫu điều hướng tab

Mẫu điều hướng tab được sử dụng để tạo ứng dụng dựa trên tab. Nó đi kèm với cấu hình sẵnTabViewthành phần với một số trang. Sử dụng lệnh dưới đây để tạo ứng dụng dựa trên tab -

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

Mẫu chi tiết chính

Mẫu Master-Detail được sử dụng để tạo ứng dụng dựa trên danh sách cùng với trang chi tiết cho mọi mục trong danh sách.

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

Mẫu tùy chỉnh

Để tạo mẫu tùy chỉnh đơn giản, chúng ta cần sao chép các mẫu trống. Như bạn đã biết, NativeScript hỗ trợ các mẫu JavaScript, TypeScript, Angular và Vue.js để bạn có thể chọn bất kỳ ngôn ngữ nào và tạo một ngôn ngữ tùy chỉnh của mình.

Ví dụ: sao chép mẫu đơn giản và tùy chỉnh từ kho lưu trữ git bằng cách sử dụng lệnh dưới đây:

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

Bây giờ, nó sẽ tạo cấu trúc ứng dụng dành cho thiết bị di động để bạn có thể thực hiện bất kỳ thay đổi nào và chạy thiết bị Android / iOS của mình. Cấu trúc này dựa trên danh sách các hướng dẫn. Hãy để chúng tôi xem hướng dẫn ngắn gọn.

Kết cấu

Mẫu tùy chỉnh của bạn phải đáp ứng các yêu cầu sau:

Không đặt mã của bạn bên trong thư mục gốc ứng dụng của bạn.
Tạo một thư mục riêng và thêm khu vực tính năng bên trong.
Trang, Xem mô hình và dịch vụ nên được đặt trong khu vực tính năng. Điều này giúp tạo mã gọn gàng và sạch sẽ.
Tạo thư mục trang và đặt bên trong tệp .ts, .xml, .scss / css, v.v. ,.

package.json

Đặt tệp package.json vào thư mục gốc của mẫu ứng dụng của bạn. Cung cấp giá trị cho thuộc tính name bằng cách sử dụng định dạng -

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

Gán một giá trị cho thuộc tính phiên bản. Nó được định nghĩa dưới đây -

"version": "3.2.1",

Gán một giá trị cho thuộc tính chính chỉ định điểm vào chính cho ứng dụng của bạn. Nó được định nghĩa dưới đây -

"main": "app.js",

Gán giá trị cho thuộc tính android. Nó được định nghĩa dưới đây -

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

Thuộc tính kho lưu trữ phải được chỉ định bên trong mã của bạn như sau:

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

Phong cách

Nhập kiểu và chủ đề trong mẫu ứng dụng của bạn bằng cú pháp bên dưới -

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

Chúng tôi cũng có thể chỉ định màu nền tùy chỉnh bằng cách sử dụng mã dưới đây:

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