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%);