NativeScript - เทมเพลต

NativeScript มีเทมเพลตสำเร็จรูปจำนวนมากเพื่อสร้างแอปพลิเคชันเปล่าที่เรียบง่าย แต่ใช้งานได้เต็มรูปแบบไปยังแอปพลิเคชันที่ใช้แท็บ

ใช้เทมเพลต

ตามที่เรียนไว้ก่อนหน้านี้สามารถสร้างแอปพลิเคชันใหม่โดยใช้ไฟล์ create คำสั่งย่อยของคำสั่ง tns

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

ที่นี่

tns-template-name คือชื่อของเทมเพลต

หากคุณต้องการสร้างเทมเพลตที่มีหน้าเดียวและไม่มีสไตล์ที่กำหนดเองโดยใช้ JavaScript ให้ใช้คำสั่งด้านล่าง -

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

เทมเพลตเดียวกันข้างต้นสามารถสร้างได้โดยใช้ TypeScript ดังนี้ -

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

เทมเพลตการนำทาง

เทมเพลตการนำทางใช้เพื่อสร้างแอปพลิเคชันระดับปานกลางถึงซับซ้อน มาพร้อมกับการกำหนดค่าล่วงหน้าSideDrawer คอมโพเนนต์ที่มีหลายหน้า SideDrawerคอมโพเนนต์มีมุมมองที่ซ่อนอยู่สำหรับ UI การนำทางหรือการตั้งค่าทั่วไป ใช้คำสั่งด้านล่างเพื่อสร้างแอปพลิเคชันตามการนำทาง -

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

เทมเพลตการนำทางของแท็บ

เทมเพลตการนำทางของแท็บใช้เพื่อสร้างแอปพลิเคชันตามแท็บ มาพร้อมกับการกำหนดค่าล่วงหน้าTabViewคอมโพเนนต์ที่มีหลายหน้า ใช้คำสั่งด้านล่างเพื่อสร้างแอปพลิเคชันตามแท็บ -

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

เทมเพลตรายละเอียดหลัก

เทมเพลต Master-Detail ใช้เพื่อสร้างแอปพลิเคชันตามรายการพร้อมกับหน้ารายละเอียดสำหรับทุกรายการในรายการ

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

เทมเพลตที่กำหนดเอง

ในการสร้างเทมเพลตที่กำหนดเองอย่างง่ายเราจำเป็นต้องโคลนเทมเพลตเปล่า ดังที่คุณทราบแล้ว NativeScript รองรับเทมเพลต JavaScript, TypeScript, Angular และ Vue.js เพื่อให้คุณสามารถเลือกภาษาใดก็ได้และสร้างแบบกำหนดเองของคุณ

ตัวอย่างเช่นโคลนเทมเพลตที่เรียบง่ายและกำหนดเองจากที่เก็บ git โดยใช้คำสั่งด้านล่าง -

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

ตอนนี้มันจะสร้างโครงสร้างแอพมือถือเพื่อให้คุณสามารถทำการเปลี่ยนแปลงใด ๆ และเรียกใช้อุปกรณ์ Android / iOS ของคุณ โครงสร้างนี้เป็นไปตามรายการแนวทาง ให้เราดูแนวทางโดยสังเขป

โครงสร้าง

เทมเพลตที่กำหนดเองของคุณต้องเป็นไปตามข้อกำหนดต่อไปนี้ -

  • อย่าวางโค้ดของคุณไว้ในโฟลเดอร์รูทของแอพ

  • สร้างโฟลเดอร์แยกต่างหากและเพิ่มพื้นที่คุณลักษณะภายใน

  • ควรวางหน้าดูรุ่นและบริการในพื้นที่คุณลักษณะ ซึ่งจะช่วยในการสร้างรหัสที่เรียบร้อยและสะอาด

  • สร้างโฟลเดอร์หน้าและขึ้นภายใน.ts, .xml .scss css / ฯลฯไฟล์

package.json

วางไฟล์ package.json ในโฟลเดอร์รูทของเทมเพลตแอปของคุณ ระบุค่าสำหรับคุณสมบัติ name โดยใช้รูปแบบ -

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

กำหนดค่าสำหรับคุณสมบัติเวอร์ชัน มีการกำหนดไว้ด้านล่าง -

"version": "3.2.1",

กำหนดค่าสำหรับคุณสมบัติหลักที่ระบุจุดเข้าหลักไปยังแอปของคุณ มีการกำหนดไว้ด้านล่าง -

"main": "app.js",

กำหนดค่าสำหรับคุณสมบัติ android มีการกำหนดไว้ด้านล่าง -

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

ควรระบุคุณสมบัติที่เก็บไว้ในโค้ดของคุณดังนี้ -

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

สไตล์

นำเข้าสไตล์และธีมในเทมเพลตแอปของคุณโดยใช้ไวยากรณ์ด้านล่าง -

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

นอกจากนี้เรายังสามารถกำหนดสีพื้นหลังที่กำหนดเองได้โดยใช้รหัสด้านล่าง -

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