Page

This is an overview of the most common usage of Page. For more information about the available properties, methods, or events, head over to the complete API documentation for Page.

<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

ИмяТипОписание
actionBarHiddenBooleanПоказывать или скрывать <ActionBar> для текущей страницы.
По умолчанию: false.
backgroundSpanUnderStatusBarBooleanПолучает или устанавливает должен ли фон страницы распространяться под статус бар.
По умолчанию: false.
androidStatusBarBackgroundColor(Только для Android) Получает или устанавливает цвет статус бара для устройств на базе Android.
enableSwipeBackNavigationBoolean(Только для iOS) Получает или устанавливает может ли страница обрабатывать навигацию назад по свайпу на iOS.
По умолчанию: true.
statusBarStyleStringПолучает или устанавливает стиль статус бара.
Корректные значения:
light,
dark.

Events

ИмяОписание
loadedСрабатывает сразу после загрузки страницы.
navigatedFromСрабатывает после того, как завершится переход с текущей страницы на другую.
navigatedToСрабатывает после того, как завершится переход с другой страницы на текущую.
navigatingFromСрабатывает до того, как завершится переход на другую страницу с текущей.
navigatingToСрабатывает до того, как завершится переход с другой страницы на текущую.

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

AndroidiOS
org.nativescript.widgets.GridLayoutUIViewController
Contributors