Відмінності між версіями «NativeScript Architecture and Navigation»
м |
м |
||
(не показані 4 проміжні версії цього учасника) | |||
Рядок 97: | Рядок 97: | ||
const frameModule = require("tns-core-modules/ui/frame"); | const frameModule = require("tns-core-modules/ui/frame"); | ||
const topmostFrame = frameModule.topmost(); | 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 | ||
+ | |||
+ | <!-- app-root.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; | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | [[category:NativeScript]] |
Поточна версія на 11:33, 1 грудня 2018
Зміст
Управління сторінками
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; } });