RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.nativescript.org/guide/navigation/frames-and-pages below:

Navigation using Frames and Pages

Navigation in NativeScript is enabled by the Frame class.

Examples Navigating to another page

To navigate from one Page to another, first obtain the desired Frame instance. For simple navigation, call the navigate method passing along the path of the page to navigate to.

ts

frame.navigate('~/pages/details/details-page')

Getting a Frame instance

The following are some of the ways in which to obtain a Frame instance.

Getting the topmost frame ts

import { Frame } from '@nativescript/core'

const frame = Frame.topmost()

Getting the frame from a Page

For example, you can get the current Frame instance from a tap event's data as follows:

ts

onFlickTap(args: EventData): void {
  const button = args.object as Button;
  const frame = button.page.frame;
}

Getting a frame by id ts

import { Frame } from '@nativescript/core'

const frame = Frame.getFrameById('frame-id')

Navigating back

To navigate back to the previous page, use the goBack method of the Frame instance.

Avoid navigating back to the previous page

To avoid navigating to the previous page, set the clearHistory property of the NavigationEntry object that you pass to the navigate method to true.

ts

frame.navigate({
  moduleName: 'details/details-page',
  clearHistory: true,
})

Passing data between pages

To pass data to the page you are navigating to, set the value of the context property of the NavigationEntry to the data you would like to pass.

ts

frame.navigate({
  moduleName: 'details/details-page',
  context: { id: 2 },
})

To access the passed data, handle the navigatedTo event for the details/details-page page and access the context property on the event's NavigatedData object.

ts

import { NavigatedData } from '@nativescript/core'

export function onNavigatedTo(args: NavigatedData) {
  this.id = args.context.id
  this.notifyPropertyChange('id', args.context.id)
}

Creating multiple frames

If you need to create multiple frames, you can do so by wrapping them in a container layout. For example if you want to have 2 frames side-by-side, you can wrap them in a GridLayout:

xml

<GridLayout columns="*, *">
  <Frame col="0" />
  <Frame col="1" />
</GridLayout>