Another Vue of NativeScript Webinar is now on YouTube
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> es un componente de UI que representa una pantalla de una aplicación. Las apps NativeScript típicamente consisten en una o más <Page> que incluyen contenido como un <ActionBar> y otros elementos.


Una página única

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

Usando el evento loaded para disparar cambios en UI

Un escenario típico es realizar cambios en la interfaz después de que la página se ha cargado. La forma recomendada de hacer esto es usando el evento loaded, disparado por NativeScript cuando la página está totalmente cargada:

<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')
      })
    }
  }
}

NOTA: Los desarrolladores que vienen de un entorno web generalmente usarían el hook de ciclo de vida mounted que Vue proporciona, sin embargo en NativeScript la aplicación, y ciertos elementos podrían no estar cargados aún cuando el hook mounted es disparado, de ahí que ciertas acciones como mostrar ventanas de diálogo, navegaciones, etc. no son posible dentro del hook mounted. Para solucionar esta limitación, se puede usar el evento loaded, el cual sólo se dispara después de que la aplicación está lista. En este caso, estamos usando el evento loaded del elemento <Page>, pero este evento está disponible en todos los elementos NativeScript.

Props

NombreTipoDescripción
actionBarHiddenBooleanMuestra u oculta el <ActionBar> para la página.
Valor por defecto: false.
backgroundSpanUnderStatusBarBooleanObtiene o establece si el fondo de la pantalla Gets or sets whether the background of the page sitúa también bajo la barra de estado.
Valor por defecto: false.
androidStatusBarBackgroundColor(Sólo para Android) Obtiene o establece el color de la barra de estado en dispositivos Android.
enableSwipeBackNavigationBoolean(Sólo para iOS) Obtiene o establece si la página puede ser deslizado (swiped) en iOS para volver atrás.
Valor por defecto: true.
statusBarStyleStringObtiene o establece el estilo de la barra de estado.
Valid values:
light,
dark.

Eventos

NombreDescripción
loadedEmitido después de que la página ha sido cargada.
navigatedFromEmitido después de que la app haya navegado a otra página desde la página actual.
navigatedToEmitido después de que la app haya navegado a la página actual.
navigatingFromEmitido justo antes de que la app haya navegado a otra página desde la página actual.
navigatingToEmitido justo antes de que la app haya navegado a la página actual.

Componente Nativo

AndroidiOS
org.nativescript.widgets.GridLayoutUIViewController
Contributors