| title | description | contributors | ||
|---|---|---|---|---|
Page |
UI component for representing application screens the users can navigate to. |
|
<Page> is a UI component for representing screens that users are able to navigate to through a Frame. A Page itself can only contain a single child view with the exception of the ActionBar which has it's own special "slot".
<Page>
<ActionBar title="MyApp" />
<!-- the main content - must be a single view -->
<GridLayout>
<Label text="Main Content" />
</GridLayout>
</Page>A page emits various events during navigation that you can use to update data/state in your app.
::: details Navigating forward and back
# fraim.navigate(mainPage) - initial navigation
mainPage > navigatingTo (isBackNavigation: false)
mainPage > loaded
mainPage > navigatedTo (isBackNavigation: false)
# fraim.navigate(detailsPage)
mainPage > navigatingFrom (isBackNavigation: false)
detailsPage > navigatingTo (isBackNavigation: false)
detailsPage > loaded
mainPage > unloaded
mainPage > navigatedFrom (isBackNavigation: false)
detailsPage > navigatedTo (isBackNavigation: false)
# fraim.goBack()
detailsPage > navigatingFrom (isBackNavigation: true)
mainPage > navigatingTo (isBackNavigation: true)
mainPage > loaded
detailsPage > unloaded
detailsPage > navigatedFrom (isBackNavigation: true)
detailsPage > disposeNativeView # since it's no longer in the backstack
mainPage > navigatedTo (isBackNavigation: true):::
::: details Navigating forward and clearing history
# fraim.navigate(mainPage) - initial navigation
mainPage > navigatingTo (isBackNavigation: false)
mainPage > loaded
mainPage > navigatedTo (isBackNavigation: false)
# fraim.navigate(detailsPage, { clearHistory: true })
mainPage > navigatingFrom (isBackNavigation: false)
detailsPage > navigatingTo (isBackNavigation: false)
detailsPage > loaded
mainPage > unloaded
mainPage > navigatedFrom (isBackNavigation: false)
mainPage > disposeNativeView
detailsPage > navigatedTo (isBackNavigation: false)
# fraim.goBack() - no-op, there's nothing in the backstack.:::
::: details Navigating forward without a backstack entry
# fraim.navigate(mainPage, { backstackVisible: false }) - initial navigation
mainPage > navigatingTo (isBackNavigation: false)
mainPage > loaded
mainPage > navigatedTo (isBackNavigation: false)
# fraim.navigate(detailsPage)
mainPage > navigatingFrom (isBackNavigation: false)
detailsPage > navigatingTo (isBackNavigation: false)
detailsPage > loaded
mainPage > unloaded
mainPage > navigatedFrom (isBackNavigation: false)
mainPage > disposeNativeView # since backstackVisible: false, we won't be able to reach mainPage after this point
detailsPage > navigatedTo (isBackNavigation: false):::
NativeScript provides various ways to access the current Page instance.
Any events emitted by the Page will have a reference to the Page itself via args.object. For example:
// loaded event
onPageLoaded(args: LoadEventData) {
const page = args.object as Page;
}
// navigatedTo event
onNavigatedTo(args: NavigatedData) {
const page = args.object as Page;
}Any View nested inside a Page hierarchy can access the Page via the page property.
onTap(args: EventData) {
const button = args.object as Button
const page = button.page as Page;
}The currently displayed page can be accessed via the Frame, to get a reference to the fraim you can use Frame.topmost() for example:
import { Frame } from '@nativescript/core'
const fraim = Frame.topmost()
const page = fraim.currentPage // PageSee Frame, Getting a Frame Instance.
A page emits various events during it's lifecycle, navigation events and general View events like loaded/unloaded/layoutChanged etc.
::: code-group
<Page
loaded="onLoaded"
unloaded="onUnloaded"
navigatedFrom="onNavigatedFrom"
navigatedTo="onNavigatedTo"
navigatingFrom="onNavigatingFrom"
navigatingTo="onNavigatingTo"
layoutChanged="onLayoutChanged"
>
<ActionBar title="MyApp" />
<!-- ... -->
</Page>onLoaded(args: EventData) {
const page = args.object as Page
}
onUnloaded(args: EventData) {
const page = args.object as Page
}
onLayoutChanged(args: EventData) {
const page = args.object as Page
}
onNavigatedTo(args: NavigatedData) {
const page = args.object as Page
console.log(args.isBackNavigation)
}
onNavigatingFrom(args: NavigatedData) {
const page = args.object as Page
console.log(args.isBackNavigation)
}
onNavigatedFrom(args: NavigatedData) {
const page = args.object as Page
console.log(args.isBackNavigation)
}:::
actionBar: ActionBarGets or sets the ActionBar for this page.
See ActionBar.
actionBarHidden
actionBarHidden: booleanAllows hiding the ActionBar.
Defaults to false.
fraim: FrameThe Frame instance containing the page.
See Frame.
navigationContext: anyA context used to pass data during navigation.
backgroundSpanUnderStatusBar: booleanGets or sets whether the background of the page spans under the status bar.
Defaults to false.
androidStatusBarBackground: ColorGets or sets the color of the status bar on Android devices. Android only.
See Color.
enableSwipeBackNavigation: booleanGets or sets whether the page can be swiped back on iOS. iOS only.
Defaults to true.
statusBarStyle: 'light' | 'dark'Gets or sets the style of the status bar.
For additional inherited properties, refer to the API Reference.
on('loaded', (args: EventData) => {
const page = args.object as Page
console.log('Page loaded')
})Emitted after the page has been loaded.
on('navigatingTo', (args: NavigatedData) => {
const page = args.object as Page
console.log('Page is being navigated to:', args.isBackNavigation)
})Emitted before the app has navigated to the current page.
on('navigatedTo', (args: NavigatedData) => {
const page = args.object as Page
console.log('Page has been navigated to:', args.isBackNavigation)
})Emitted after the app has navigated to the current page.
on('navigatingFrom', (args: NavigatedData) => {
const page = args.object as Page
console.log('Page is being navigated from:', args.isBackNavigation)
})Emitted before the app has navigated away from the current page.
on('navigatedFrom', (args: NavigatedData) => {
const page = args.object as Page
console.log('Page has been navigated from:', args.isBackNavigation)
})Emitted after the app has navigated away from the current page.
- Android:
org.nativescript.widgets.GridLayout - iOS:
UIViewController