Salpicadura encima de la primera página

Mantenga un inicio de inicio encima de <RouterView> para que la primera página nativa pueda montarse debajo de él. Al eliminar la superposición se muestra esa misma página, sin agregar una entrada de bienvenida al historial de navegación.

Si el Splash es una ruta, llamar a replace() crea el destino cuando el Splash sale. En Android, ese trabajo puede competir con la animación de salida en el hilo de la interfaz de usuario. Una superposición permite que la creación de la página finalice antes de que comience la animación de salida; no saca el trabajo de inicialización del subproceso de la interfaz de usuario.

Mantener RouterView montado

Después de la instalación normal del enrutador Instalar y abrir una página, guarde esto como App.vue y el siguiente componente como Splash.vue en el mismo directorio:

<script setup lang="ts">
import { ref } from 'nativescript-vue'
import { RouterView } from 'vue-router-ns'
import Splash from './Splash.vue'

const showSplash = ref(true)
</script>

<template>
  <GridLayout>
    <GridLayout :isUserInteractionEnabled="!showSplash" :accessibilityHidden="showSplash">
      <RouterView />
    </GridLayout>
    <Splash v-if="showSplash" @done="showSplash = false" />
  </GridLayout>
</template>

Ambos niños ocupan la misma celda GridLayout. El chapoteo viene al final, encima del enrutador. El contenedor mantiene la página cubierta fuera de la interacción táctil y la accesibilidad transversal hasta que se elimina la presentación.

Solo la superposición tiene v-if. No coloque <RouterView> detrás de v-if="!showSplash": eso pospondría la creación de la página hasta que desaparezca el mensaje. Tampoco espere a router.isReady() antes que a createApp(App).use(router).start(): el enrutador necesita su vista para montarse primero.

Revelar la página

Este componente espera la navegación inicial, desvanece la superposición y emite done. Permanece visible con un mensaje de error si la inicialización arroja o el guard inicial no deja destino:

<script setup lang="ts">
import type { EventData, View } from '@nativescript/core'
import { onBeforeUnmount, ref } from 'nativescript-vue'
import { useRouter } from 'vue-router-ns'

const props = withDefaults(defineProps<{ fade?: boolean }>(), { fade: true })
const emit = defineEmits<{ done: [] }>()
const router = useRouter()
const failed = ref(false)
let started = false
let active = true

onBeforeUnmount(() => {
  active = false
})

async function reveal({ object }: EventData) {
  if (started) return
  started = true
  try {
    await router.isReady()
    if (!active) return
    // A guard can cancel initial navigation without throwing an error.
    if (!router.currentRoute.value.matched.length) {
      failed.value = true
      return
    }
  } catch (error) {
    if (active) failed.value = true
    console.error('Initial navigation failed', error)
    return
  }

  try {
    if (props.fade) await (object as View).animate({ opacity: 0, duration: 250 })
  } catch {
    // A cancelled animation must not leave a ready app behind the splash.
  }
  if (active) emit('done')
}
</script>

<template>
  <GridLayout backgroundColor="#0f172a" iosOverflowSafeArea="true" @loaded="reveal">
    <StackLayout verticalAlignment="middle" padding="32">
      <Label text="My app" color="white" fontSize="32" textAlignment="center" />
      <Label
        v-if="failed"
        text="Unable to open the first page. Please restart the app."
        color="white"
        textAlignment="center"
        textWrap="true"
      />
    </StackLayout>
  </GridLayout>
</template>

El desvanecimiento es una animación de la aplicación. Vincule :fade="false" cuando la preferencia de movimiento reducido de su aplicación esté habilitada; La política de movimiento del enrutador controla las transiciones enrutadas, no esta animación personalizada.

isReady() espera la navegación inicial, no todas las pestañas ocultas o las solicitudes de la propia red de la página. Agregue cualquier inicialización de aplicación requerida a la condición de preparación. Para la incorporación, emita done cuando el usuario complete la incorporación; mantenga el <RouterView> montado en todo momento.

Coincide con la pantalla de inicio de iOS

Configure iosOverflowSafeArea="true" en el diseño raíz de la superposición para que su fondo se extienda más allá del área segura. Utilice el mismo fondo, diseño, tamaño y posición que App_Resources/iOS/LaunchScreen.storyboard para evitar un salto visible cuando iOS pase el control a la aplicación en ejecución. Verifique la alineación en los tamaños iPhone y iPad que admite.

Esta superposición aparece después de que se inicia NativeScript. Complementa la pantalla de inicio del sistema operativo; no puede reemplazar la pantalla que se muestra antes de que se ejecute JavaScript. iosOverflowSafeArea es específico de iOS.

Los guardias todavía corren debajo

La navegación inicial, las redirecciones y guards se ejecutan como de costumbre mientras el mensaje de bienvenida está visible. Oculta la página visualmente; no retrasa la autenticación ni omite guards. Redirigir una visita inicial no autenticada a una página de inicio de sesión utilizable. Un chapoteo no es un límite de control de acceso.

No se necesita ningún cambio de API del enrutador, se necesita ruta adicional, push() o replace() para eliminar la superposición. Back regresa al historial real de la aplicación y no muestra el mensaje.