8.7 发布—WinterCG 兼容性第一部分
了解更多

<Page> 是一个 UI 组件，用于表示用户可以通过 Frame 导航到的屏幕。除了 ActionBar 有其自己的特殊“插槽”外，Page 本身只能包含一个子视图。

xml
<Page>
  <ActionBar title="MyApp" />

  <!-- the main content - must be a single view -->
  <GridLayout>
    <Label text="Main Content" />
  </GridLayout>
</Page>

Page 生命周期 ​

页面在导航过程中会发出各种事件，您可以使用这些事件来更新应用程序中的数据/状态。

Frame and Page lifecycle

生命周期事件示例 ​

向前和向后导航
bash
# frame.navigate(mainPage) - initial navigation
mainPage    > navigatingTo (isBackNavigation: false)
mainPage    > loaded
mainPage    > navigatedTo (isBackNavigation: false)

# frame.navigate(detailsPage)
mainPage    > navigatingFrom (isBackNavigation: false)
detailsPage > navigatingTo (isBackNavigation: false)
detailsPage > loaded
mainPage    > unloaded
mainPage    > navigatedFrom (isBackNavigation: false)
detailsPage > navigatedTo (isBackNavigation: false)

# frame.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)
向前导航并清除历史记录
bash
# frame.navigate(mainPage) - initial navigation
mainPage    > navigatingTo (isBackNavigation: false)
mainPage    > loaded
mainPage    > navigatedTo (isBackNavigation: false)

# frame.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)

# frame.goBack() - no-op, there's nothing in the backstack.
向前导航，不创建后退栈条目
bash
# frame.navigate(mainPage, { backstackVisible: false }) - initial navigation
mainPage    > navigatingTo (isBackNavigation: false)
mainPage    > loaded
mainPage    > navigatedTo (isBackNavigation: false)

# frame.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)

示例 ​

获取对当前 Page 的引用 ​

NativeScript 提供了多种访问当前 Page 实例的方法。

通过 Page 事件 ​

Page 发出的任何事件都将通过 args.object 引用 Page 本身。例如

ts
// loaded event
onPageLoaded(args: LoadEventData) {
  const page = args.object as Page;
}

// navigatedTo event
onNavigatedTo(args: NavigatedData) {
  const page = args.object as Page;
}

通过 Page 内任何 View 的 page 属性 ​

嵌套在 Page 层次结构中的任何 View 都可以通过 page 属性访问 Page。

ts
onTap(args: EventData) {
  const button = args.object as Button
  const page = button.page as Page;
}

通过 Frame 实例的 currentPage 属性 ​

当前显示的页面可以通过 Frame 访问，要获取对 Frame 的引用，可以使用 Frame.topmost()，例如

ts
import { Frame } from '@nativescript/core'

const frame = Frame.topmost()
const page = frame.currentPage // Page

请参阅 Frame，获取 Frame 实例。

处理各种 Page 事件 ​

页面在其生命周期中会发出各种事件，包括导航事件和一般的 View 事件，例如 loaded/unloaded/layoutChanged 等。

xml
<Page
  loaded="onLoaded"
  unloaded="onUnloaded"
  navigatedFrom="onNavigatedFrom"
  navigatedTo="onNavigatedTo"
  navigatingFrom="onNavigatingFrom"
  navigatingTo="onNavigatingTo"
  layoutChanged="onLayoutChanged"
>
  <ActionBar title="MyApp" />
  <!-- ... -->
</Page>
ts
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 ​

ts
actionBar: ActionBar

获取或设置此页面的 ActionBar。

请参阅 ActionBar。

actionBarHidden ​

ts
actionBarHidden: boolean

允许隐藏 ActionBar。

默认为 false。

frame ​

ts
frame: Frame

包含页面的 Frame 实例。

请参阅 Frame。

ts
navigationContext: any

用于在导航期间传递数据的上下文。

backgroundSpanUnderStatusBar ​

ts
backgroundSpanUnderStatusBar: boolean

获取或设置页面背景是否延伸到状态栏下方。

默认为 false。

androidStatusBarBackground ​

ts
androidStatusBarBackground: Color

获取或设置 Android 设备上状态栏的颜色。**仅限 Android**。

请参阅 Color。

enableSwipeBackNavigation ​

ts
enableSwipeBackNavigation: boolean

获取或设置 iOS 上是否可以向后滑动页面。**仅限 iOS**。

默认为 true。

statusBarStyle ​

ts
statusBarStyle: 'light' | 'dark'

获取或设置状态栏的样式。

...继承的 ​

有关其他继承的属性，请参阅 API 参考。

事件 ​

loaded ​

ts
on('loaded', (args: EventData) => {
  const page = args.object as Page
  console.log('Page loaded')
})

页面加载后发出。

ts
on('navigatingTo', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page is being navigated to:', args.isBackNavigation)
})

在应用程序导航到当前页面之前发出。

ts
on('navigatedTo', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page has been navigated to:', args.isBackNavigation)
})

在应用程序导航到当前页面后发出。

ts
on('navigatingFrom', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page is being navigated from:', args.isBackNavigation)
})

在应用程序从当前页面导航离开之前发出。

ts
on('navigatedFrom', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page has been navigated from:', args.isBackNavigation)
})

在应用程序从当前页面导航离开后发出。

原生组件 ​

上一个
Frame
下一个
ActionBar