NativeScript Architecture and Navigation

Управління сторінками

NativeScript додаток складається зі сторінок, що представлені різними екранами додатку.

Сторінка це екземпляр класу Page модуля tns-core-modules/ui/page

Оголошення сторінки

NativeScript пропонує два шляхи створення сторінки.

Оголошеня в XML

Ви можете написати оголошення UI сторінки і її ініціалізацію в коді окремо.

Для цього потрібно створити XML файл для кожної сторінки, в якому буде описано її вигляд. Також потрібно ініціалізувати її в коді JSфайлу. Назви XML та JS файлів повинні співпадати.

XML

<Page loaded="onPageLoaded">
   <StackLayout>
       <Label text="Hello, world!"/>
   </StackLayout>
</Page>

JS

// main-page.js
function onPageLoaded(args) {
   console.log("Page Loaded");
}
exports.onPageLoaded = onPageLoaded;

Створення сторінки в коді

Якщо вам потрібно створити сторінку під час виконання додатку, необхідно створити функцію createPage яка поверне екземпляр сторінки.

const Page = require("tns-core-modules/ui/page").Page;
const Label = require("tns-core-modules/ui/label").Label;
const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;

function createPage() {
   const stack = new StackLayout();
   const label = new Label();
   label.text = "Hello, world!";
   stack.addChild(label);
   const page = new Page();
   // Each page can have a single root view set via the  content property
   page.content = stack;
   return page;
}
exports.createPage = createPage;

Визначення домашньої сторінки

Кожен додаток повинен мати єдину точку входу. Для визначення точки входу ви повинні передати NavigationEntry з ім'ям модуля в метод run. NativeScript знаходить XML файл з вказаною назвою, створює форму відповідну опису, потім знаходить JS файл з такою ж назвою та виконує його код.

// app.js
const application = require("tns-core-modules/application");
application.run({ moduleName: "app-root" });

Приклад створення вкладок для головного екрану в app-root.xml.

<TabView androidTabsPosition="bottom">
   <TabViewItem title="First">
       <Frame defaultPage="home/home-page" />
   </TabViewItem>
   <TabViewItem title="Second">
       <Frame defaultPage="second/second-page" />
   </TabViewItem>
</TabView>

Приклад створення сітки для головного екрану в app-root.xml.

<GridLayout rows="*, 2*">
   <StackLayout row="0" backgroundColor="green">
   <StackLayout/>
   <StackLayout row="1">
       <Frame defaultPage="home/home-page"/>
   </StackLayout>
</GridLayout>

Навігація

Класс Frame надає можливість здійснювати переходи між різними сторінками. Додаток може мати один або декілька екземплярів Frame залежно від бізнес логіки та вимог.

Отримання посилання на Frame

Навігація в NativeScript базується на Frame API і використовує navigate метод потрібного екрану. Для отримання посилання на екземпляр Frame потрібно використовувати наступні методи та властивості:

- topmost метод з tns-core-modules/ui/frame модуля. Метод повертає екземпляр останнього показаного екрану або , при використанні TabView, поточної вкладки. Для більш гнучкого контролю ви можете використовувати метод getFrameById або властивісті класу Page.

const frameModule = require("tns-core-modules/ui/frame");
const topmostFrame = frameModule.topmost();

- Метод getFrameById модуля tns-core-modules/ui/frame. Цей метод дозволяє отримати посилання на Frame по id який ви вказали для нього. Врахуйте що такий пошук працює для вже перегланутих екранів, і не знайде екрани які ще не були відображені, наприклад модільні екрани.

const frameModule = require("tns-core-modules/ui/frame");
const firstFrame = frameModule.getFrameById("firstFrame");

- властивість frame екземпляра Page. Кожен екземпляр Page містить інформацію про об'єкт екрану у властивості frame.

const Button = require("tns-core-modules/ui/button").Button;
const Page = require("tns-core-modules/ui/page").Page;
function onTap(args) {
   const button = args.object;
   const page = button.page;
   page.frame.navigate("second/second-page");
}
exports.onTap = onTap;

Основи навігації

ДлЛя завантаження початкової сторінки додатку використовується властивість defaultPage елементу Frame. В прикладі нижче, додаток завантажить сторінку розміщену в <project-folder>/app/home/home-page.xml

<Frame id="firstFrame" defaultPage="home/home-page"/>

Для переходу між сторінками ви можете використовувати метод navigate з потрібного екземпляру Frame.

// e.g. home/home-page.js
const frameModule = require("tns-core-modules/ui/frame");
// Example using `getFrameById(frameId)` to get a `Frame` reference
// As an alternative, we could use `topmost()` method or `page.frame` property
const frame = frameModule.getFrameById("firstFrame");
frame.navigate("second/second-page");

Існує кілька способів здійснення навігації, який ви використаєте, залежить від потреб вашого додатка.

Навігація за назвою сторінки

Можливо, найпростіший спосіб навігації - це вказати назву файлу сторінки, на яку ви хочете переміститися.

frame.navigate("details-page");

Функція навігації

Більш динамічний спосіб навігації базується на використанні функції яка повертає екземпляр сторінки до якої хочемо перейти.

const Page = require("tns-core-modules/ui/page").Page;
const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;
const Label = require("tns-core-modules/ui/label").Label;
const getFrameById = require("tns-core-modules/ui/frame").getFrameById;
const frame = getFrameById("firstFrame");
frame.navigate({ 
   create: () => {
       const stack = new StackLayout();
       const label = new Label();
       label.text = "Hello, world!";
       stack.addChild(label);

       const page = new Page();
       page.content = stack;
       return page;
   }
});