框架

<Frame> 是一个用于显示和在 页面 之间导航的 UI 组件。一个 NativeScript 应用程序可以有多个框架，也可以没有 - 大多数应用程序至少会有一个框架，通常设置为根视图（或在 RootLayout 内部）。

示例 ​

单个根框架 ​

此示例显示了一个单个根框架，默认情况下导航到 main-page，并允许用户在此框架内进一步导航（跨越整个屏幕）。

<!-- app-root -->
<Frame defaultPage="main-page"/>

全局菜单栏和框架 ​

此示例显示了一个始终可见的菜单栏，堆叠在一个允许用户进一步导航的框架之上。

<GridLayout rows="auto, *">
  <Label row="0" text="Example Menu Bar"/>
  <ContentView row="1">
    <Frame defaultPage="mainPage"/>
  </ContentView>
</GridLayout>

多个根框架 ​

此伪示例显示了两个并排的框架，左侧的框架表示对话列表，右侧的框架表示当前选定对话的详细信息。

在左侧使用框架的想法是允许导航到不同的页面，同时保持右侧的对话详细信息处于打开状态。

<GridLayout columns="300, *">
  <ContentView col="0">
    <Frame defaultPage="conversation-list" />
  </ContentView>
  <ContentView col="1">
    <Frame defaultPage="conversation-details" />
  </ContentView>
</GridLayout>

属性 ​

actionBarVisibility ​

actionBarVisibility: 'auto' | 'always' | 'never'

用于控制此框架内所有页面的 iOS 中的导航栏和 Android 中的 ActionBar 的可见性。

animated ​

animated: boolean

获取或设置此框架内导航转换是否应为动画。

backStack ​

backStack: BackstackEntry[]

只读 后退栈条目列表。

请参阅 BackstackEntry。

currentEntry ​

currentEntry: NavigationEntry

只读。框架导航到的当前 NavigationEntry。

请参阅 NavigationEntry。

currentPage ​

currentPage: Page

只读。框架导航到的当前页面。

请参阅 Page。

transition ​

transition: NavigationTransition

获取或设置此框架的默认导航转换。

请参阅 NavigationTransition。

defaultAnimatedNavigation ​

defaultAnimatedNavigation: boolean

静态。获取或设置导航转换是否应全局动画。

defaultTransition ​

defaultTransition: NavigationTransition

静态。获取或设置应用程序中所有框架的默认 NavigationTransition。

请参阅 NavigationTransition。

...继承的 ​

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

方法 ​

canGoBack() ​

canGoBack(): boolean

返回此框架是否可以后退（后退栈中有条目）。

goBack() ​

goBack(to?: BackstackEntry): void

导航到后退栈中的上一个条目（或 to）。

请参阅 BackstackEntry。

navigate() ​

navigate(pageModuleName: string): void
// or
navigate(create: () => Page): void
// or
navigate(entry: NavigationEntry): void

导航到页面。

请参阅 Frame.navigate 参考、Page、NavigationEntry。

getFrameById() ​

getFrameById(id: string): Frame

静态。如果找到，则根据其 id 返回框架。

请参阅 Frame。

topmost() ​

topmost(): Frame

静态。返回最顶层的框架。

请参阅 Frame。

事件 ​

navigatingTo ​

on('navigatingTo', (args: NavigationData) => {
  const frame = args.object as Frame
  const entry = args.entry as BackstackEntry
  const page = entry.resolvedPage as Page
})

当框架导航到新页面时发出。

navigatedTo ​

on('navigatedTo', (args: NavigationData) => {
  const frame = args.object as Frame
  const entry = args.entry as BackstackEntry
  const page = entry.resolvedPage as Page
})

当框架已导航到新页面时发出。

NavigationTransition 接口 ​

请参阅 NavigationTransition API 参考。

name ​

name: string

命名转换名称。可用转换

• curl（与 curlUp 相同）（**仅限 iOS**）
• curlUp（**仅限 iOS**）
• curlDown（**仅限 iOS**）
• explode（**仅限 Android**）
• fade
• flip（与 flipRight 相同）
• flipRight
• flipLeft
• slide（与 slideLeft 相同）
• slideLeft
• slideRight
• slideTop
• slideBottom

instance ​

instance: Transition

此属性允许您定义自定义转换实例

请参阅 Transition。

duration ​

duration: number

转换的持续时间（以毫秒为单位）

curve ​

curve: CoreTypes.AnimationCurve

设置转换动画曲线。

或者，您可以传递类型为 UIViewAnimationCurve（适用于 iOS）或 android.animation.TimeInterpolator（适用于 Android）的实例。

请参阅 CoreTypes.AnimationCurve。

NavigationEntry 接口 ​

请参阅 NavigationEntry API 参考。

moduleName ​

moduleName: string

要导航到的页面模块的名称（例如，如果存在 pages/details-page.xml，则为 pages/details-page）。

create() ​

create: () => View

一个用于创建要导航到的页面（视图实例）的函数。

function create() {
  const page = new Page()
  const actionBar = new ActionBar()
  actionBar.title = 'Example Page'
  page.actionBar = actionBar

  const stackLayout = new StackLayout()
  stackLayout.backgroundColor = '#65adf1'
  page.content = stackLayout

  return page
}

context ​

context: any

用于将数据传递到导航到的页面的对象。

transition ​

transition: string | NavigationTransition

导航时要使用的 转换名称 或 NavigationTransition。

请参阅 NavigationTransition。

transitionAndroid ​

transitionAndroid: string | NavigationTransition

在 Android 上导航时覆盖 transition 属性。

请参阅 NavigationTransition。

transitioniOS ​

transitioniOS: string | NavigationTransition

在 iOS 上导航时覆盖 transition 属性。

请参阅 NavigationTransition。

backstackVisible ​

backstackVisible: boolean

如果设置为 true，则在后退栈中记录导航。

如果设置为 false，则导航不会影响后退栈。一旦从页面导航离开，它将被释放，并且用户无法（通过后退按钮）返回到该页面。

clearHistory ​

clearHistory: boolean

如果设置为 true，则清除导航历史记录后退栈。

原生组件 ​

• Android：org.nativescript.widgets.ContentLayout
• iOS：UINavigationController