NativeScript - โมดูล

NativeScript โมดูลมีชุดของฟังก์ชันการทำงานที่เกี่ยวข้องกับการบรรจุเป็นห้องสมุดเดียว ให้เราเรียนรู้โมดูลที่จัดทำโดย NativeScript framework

ประกอบด้วยฟังก์ชันหลักของกรอบงาน NativeScript ให้เราเข้าใจโมดูลหลักในบทนี้

ใบสมัคร

แอปพลิเคชันประกอบด้วยการใช้งานแอปพลิเคชันมือถือเฉพาะแพลตฟอร์ม โมดูลหลักอย่างง่ายถูกกำหนดไว้ด้านล่าง -

const applicationModule = require("tns-core-modules/application");

คอนโซล

โมดูลคอนโซลใช้เพื่อบันทึกข้อความ มีวิธีการดังต่อไปนี้ -

console.log("My FirstApp project"); 
console.info("Native apps!"); 
console.warn("Warning message!"); 
console.error("Exception occurred");

การตั้งค่าแอปพลิเคชัน

โมดูลการตั้งค่าแอปพลิเคชันประกอบด้วยวิธีการจัดการการตั้งค่าแอปพลิเคชัน ในการเพิ่มโมดูลนี้เราต้องเพิ่มรหัสต่อไปนี้ -

const appSettings = require("tns-core-modules/application-settings");

วิธีการไม่กี่วิธีที่สามารถใช้ได้ในการตั้งค่าแอปพลิเคชันมีดังนี้ -

  • setBoolean (คีย์: สตริง, ค่า: บูลีน) - ตั้งค่าวัตถุบูลีน

  • setNumber (คีย์: สตริงค่า: ตัวเลข) - ตั้งค่าอ็อบเจ็กต์ตัวเลข

  • setString (คีย์: สตริง, ค่า: สตริง) - ตั้งค่าวัตถุสตริง

  • getAllKeys () - มีคีย์ที่เก็บไว้ทั้งหมด

  • hasKey (คีย์: สตริง) - ตรวจสอบว่ามีคีย์อยู่หรือไม่

  • ชัดเจน - ล้างค่าที่เก็บไว้

  • ลบ - ลบรายการใด ๆ ตามคีย์

ตัวอย่างง่ายๆโดยใช้การตั้งค่าแอปพลิเคชันมีดังนี้ -

function onNavigatingTo(args) { 
   appSettings.setBoolean("isTurnedOff", false);
   appSettings.setString("name", "nativescript"); 
   appSettings.setNumber("locationX", 54.321); 
   const isTurnedOn = appSettings.getBoolean("isTurnedOn"); 
   const username = appSettings.getString("username"); 
   const locationX = appSettings.getNumber("locationX"); 
   // Will return "not present" if there is no value for "noKey" 
   const someKey = appSettings.getString("noKey", "not present"); 
}
exports.onNavigatingTo = onNavigatingTo; 
function onClear() {
   // Removing a single entry via its key name 
   appSettings.remove("isTurnedOff"); 
   // Clearing the whole settings 
   appSettings.clear(); 
}

http

โมดูลนี้ใช้สำหรับการจัดการ httpคำขอและการตอบสนอง ในการเพิ่มโมดูลนี้ในแอปพลิเคชันของคุณให้เพิ่มรหัสต่อไปนี้ -

const httpModule = require("tns-core-modules/http");

เราสามารถส่งข้อมูลโดยใช้วิธีการดังต่อไปนี้ -

getString- ใช้ในการร้องขอและดาวน์โหลดข้อมูลจาก URL เป็นสตริง มีการกำหนดไว้ด้านล่าง -

httpModule.getString("https://.../get").then(
   (r) => { 
      viewModel.set("getStringResult", r); 
   }, (e) => 
   { 
   }
);

getJSON- ใช้เพื่อเข้าถึงข้อมูลจาก JSON มีการกำหนดไว้ด้านล่าง -

httpModule.getJSON("https://.../get").then((r) => { 
}, (e) => { 
});

getImage- ดาวน์โหลดเนื้อหาจาก URL ที่ระบุและส่งคืนออบเจ็กต์ ImageSource มีการกำหนดไว้ด้านล่าง -

httpModule.getImage("https://.../image/jpeg").then((r) => { 
}, (e) => { 
});

getFile - มี URL อาร์กิวเมนต์สองรายการและเส้นทางไฟล์

  • URL - ดาวน์โหลดข้อมูล

  • File path- บันทึกข้อมูล URL ลงในไฟล์ มีการกำหนดไว้ด้านล่าง -

httpModule.getFile("https://").then((resultFile) => { 
}, (e) => { 
});

request- มีอาร์กิวเมนต์ตัวเลือก ใช้เพื่อร้องขออ็อพชันและส่งคืนอ็อบเจ็กต์ HttpResponse มีการกำหนดไว้ด้านล่าง -

httpModule.request({ 
   url: "https://.../get", 
   method: "GET" 
}).then((response) => { 
}, (e) => { 
});

แหล่งที่มาของภาพ

โมดูลแหล่งที่มาของภาพใช้บันทึกภาพ เราสามารถเพิ่มโมดูลนี้ได้โดยใช้คำสั่งด้านล่าง -

const imageSourceModule = require("tns-core-modules/image-source");

หากคุณต้องการโหลดภาพจากทรัพยากรให้ใช้รหัสด้านล่าง -

const imgFromResources = imageSourceModule.fromResource("icon");

ในการเพิ่มรูปภาพจากไฟล์ในเครื่องให้ใช้คำสั่งด้านล่าง -

const folder = fileSystemModule.knownFolders.currentApp(); 
const path = fileSystemModule.path.join(folder.path, "images/sample.png"); 
const imageFromLocalFile = imageSourceModule.fromFile(path);

ในการบันทึกภาพไปยังเส้นทางไฟล์ให้ใช้คำสั่งด้านล่าง -

const img = imageSourceModule.fromFile(imagePath); 
const folderDest = fileSystemModule.knownFolders.documents(); 
const pathDest = fileSystemModule.path.join(folderDest.path, "sample.png"); 
const saved = img.saveToFile(pathDest, "png"); if (saved) { 
   console.log(" sample image saved successfully!"); 
}

จับเวลา

โมดูลนี้ใช้ในการรันโค้ดในช่วงเวลาที่กำหนด ในการเพิ่มสิ่งนี้เราจำเป็นต้องใช้require -

const timerModule = require("tns-core-modules/timer");

มันขึ้นอยู่กับสองวิธี -

setTimeout- ใช้เพื่อชะลอการดำเนินการ มันแสดงเป็นมิลลิวินาที

setInterval - ใช้เพื่อใช้เป็นประจำในช่วงเวลาที่กำหนด

ติดตาม

โมดูลนี้มีประโยชน์สำหรับการดีบัก ให้ข้อมูลการบันทึก โมดูลนี้สามารถแสดงเป็น -

const traceModule = require("tns-core-modules/trace");

หากคุณต้องการเปิดใช้งานในแอปพลิเคชันของคุณให้ใช้คำสั่งด้านล่าง -

traceModule.enable();

ui / รูปภาพแคช

โมดูลแคชรูปภาพใช้เพื่อจัดการคำขอดาวน์โหลดรูปภาพและแคชรูปภาพที่ดาวน์โหลด โมดูลนี้สามารถแสดงได้ดังที่แสดงด้านล่าง -

const Cache = require("tns-core-modules/ui/image-cache").Cache;

การเชื่อมต่อ

โมดูลนี้ใช้เพื่อรับข้อมูลการเชื่อมต่อของเครือข่ายที่เชื่อมต่อ สามารถแสดงเป็น -

const connectivityModule = require("tns-core-modules/connectivity");

โมดูลการทำงาน

โมดูลฟังก์ชันการทำงานประกอบด้วยโมดูลเฉพาะระบบ / แพลตฟอร์มจำนวนมาก โมดูลที่สำคัญบางส่วนมีดังนี้ -

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

const platformModule = require("tns-core-modules/platform");

fps-meter- ใช้เพื่อจับภาพเฟรมต่อวินาที สามารถกำหนดได้ตามที่ระบุด้านล่าง -

const fpsMeter = require("tns-core-modules/fps-meter");

file-system- ใช้เพื่อทำงานกับระบบไฟล์อุปกรณ์ของคุณ มีการกำหนดไว้ด้านล่าง -

const fileSystemModule = require("tns-core-modules/file-system");

ui/gestures - ใช้เพื่อทำงานกับท่าทาง UI

โมดูล UI

โมดูล UI ประกอบด้วยส่วนประกอบ UI และฟังก์ชันที่เกี่ยวข้อง โมดูล UI ที่สำคัญบางส่วนมีดังนี้ -

  • frame

  • page

  • color

  • text/formatted-string

  • xml

  • styling

  • animation