使用模态导航 | NativeScript 中文

要显示模态，请在 View 实例上调用 showModal 方法，并将模态视图文件路径传递给它

xml

<Button text="View details" tap="onTap" />

onTap(args: EventData) {
  const button = args.object as Button
  button.showModal("details-page")
}

要关闭模态，请从模态中调用任何 View 的 closeModal 方法。可选择地将要访问父页面的数据传递给它

xml

<Button text="Close" tap="onTap" />

onTap(args: EventData) {
  const button = args.object as Button
  button.closeModal({
    name: 'John Doe - EDITED',
  })
}

可以通过在 showModal 选项参数中传递 context 来完成数据传递。

const options: ShowModalOptions = {
  context: { name: 'John Doe' },
  closeCallback(args: { name: string }) {
    console.log('Modal closed', args.name)
  },
}
// ...
button.showModal('details-page', options)

要访问模态中的数据，请处理 shownModally 事件，并通过 args.context 访问它。

xml

<Page shownModally="onShownModally">
  <StackLayout>
    <TextField text="{{ name }}" />
    <Button text="Close" tap="onClose"/>
  </StackLayout>
</Page>

import {
  fromObject,
  Page,
  Button,
  ShownModallyData,
  EventData,
} from '@nativescript/core'

export function onShownModally(args: ShownModallyData) {
  const page = args.object as Page
  const context = fromObject({
    ...args.context,
    onClose(args: EventData) {
      const button = args.object as Button
      button.closeModal({
        name: context.name, // 'John Doe - EDITED'
      })
    },
  })
  page.bindingContext = context
}

显示模态 ​

关闭模态 ​

向模态传递数据和从模态接收数据 ​

贡献者

显示模态

关闭模态

向模态传递数据和从模态接收数据