Відмінності між версіями «NativeScript Architecture and Navigation»
м |
м |
||
| Рядок 86: | Рядок 86: | ||
== Навігація == | == Навігація == | ||
| + | |||
| + | Класс 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(); | ||
Версія за 09:58, 30 листопада 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();
