<Page> - визуальный компонент, представляющий экран приложения. NativeScript приложения обычно состоят из одного или нескольких <Page> компонентов, которые содержат внутри себя другие UI-виджеты, например <ActionBar>.

Одна страница

<Page>
  <ActionBar title="My App" />
  <GridLayout>
    <Label text="My Content"/>
  </GridLayout>
</Page>

Использование события loaded для выполнения кастомных действий с UI

Типичный сценарий - изменение пользовательского интерфейса сразу после загрузки страницы. Для этого рекомендуется подписываться на событие loaded, генерируемое NativeScript после того, как страница полностью загружена:

<Page @loaded="greet">
  <ActionBar title="My App" />
  <GridLayout>
    <Label text="My Content"/>
  </GridLayout>
</Page>

export default {
  methods: {
    greet() {
      alert('Hello!').then(() => {
        console.log('Dialog closed')
      })
    }
  }
}

ЗАМЕЧАНИЕ Разработчики, пришедшие из web, обычно пытаются добиться того же результата с помощью хука жизненного цикла Vue - mounted. Однако, некоторые элементы NativeScript приложения могут быть еще не загружены к моменту, когда сработает хук mounted, например, оповещения (alerts), диалоги (dialogs), навигация и проч. Внутри хука mounted нет доступа к этим действиям. Это ограничение можно обойти, подписываясь на событие loaded, которое срабатывает только после того, как приложение полностью загружено и готово. В нашем примере мы используем событие loaded для компонента <Page>, но подписаться на него может любой NativeScript элемент.

Props

Events

Нативный компонент