Page

Using a page requires the Page module.

import { Page, ShownModallyData, NavigatedData } from "tns-core-modules/ui/page";
// FrameModule is needed in order to have an option to navigate to the new page.
import { topmost, NavigationEntry } from "tns-core-modules/ui/frame";

Attaching event handler for the Page loaded event to set bindingContext.

<Page loaded="pageLoaded">
  <Label text="{{ name }}" />
</Page>
function pageLoaded(args) {
    const page = args.object;
    page.bindingContext = { name: "Some name" };
}
exports.pageLoaded = pageLoaded;

Creating and navigating to the created page.

const topFrame = topmost();
const currentPage = topFrame.currentPage;

let testPage: Page;
const pageFactory = function (): Page {
    testPage = new Page();
    const label = new Label();
    label.text = "The quick brown fox jumps over the lazy dog.";
    testPage.content = label;
    return testPage;
};

const navEntry = {
    create: pageFactory,
    animated: false
};
topFrame.navigate(navEntry);
topFrame.goBack();

Pass data to the new page.

let testPage: Page;
const pageFactory = function (): Page {
    testPage = new Page();
    testPage.on(Page.navigatedToEvent, function () {
        //console.log(JSON.stringify(context));
    });
    return testPage;
};

const navEntry = {
    create: pageFactory,
    context: "myContext",
    animated: false
};

const topFrame = topmost();
topFrame.navigate(navEntry);

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.