<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

Eventos

Componente Nativo