Saltar al contenido

@capgo/capacitor-navegación nativa

Rendere la navegación de iOS y Android nativamente mientras JavaScript sigue controlando las rutas, contenido, iconos, etiquetas y estado de la barra.

Navegación nativa

Dibuja la barra de navegación superior y la pestaña inferior con la interfaz de usuario de la plataforma en lugar de componentes web.

Rutas propiedad de la web

La navegación nativa emite eventos de intención del usuario, luego tu router existente cambia el contenido de la vista de WebView.

Iconos serializados

Configura pestañas y botones con SVG, SF Symbol, imágenes embaladas o descripciones de recursos de Android.

Shell de transición nativa

Captura la WebView actual, actualiza contenido en JavaScript, luego finaliza con una animación de snapshot a WebView nativa.

Zoom rutas

Abrir rutas de tarjeta, mosaico y detalles de medios con geometría de zoom nativa estilo compartido.

Concha nativaTocar flujo
Demostración animada de concha de navegación nativa mostrando contenido de WebView, navegador nativo, pestañas y contenido.Demostración animada de flujo de navegación nativa mostrando selección de pestañas, transición de empuje y botón de atrás nativo.
  • configure(options?) habilita el host de navegador nativo y controla los márgenes de contenido.
  • setNavbar(options) actualiza el título, subtítulo, botón de atrás, botones, colores, transparencia y visibilidad.
  • setTabbar(options) actualiza pestañas, pestaña seleccionada, etiquetas, iconos, colores y visibilidad.
  • beginTransition(options?) captura la WebView saliente antes del cambio de ruta de JavaScript.
  • finishTransition(options?) animación desde la captura de instantáneo a la WebView en vivo después de que el contenido de la ruta esté listo.
  • beginZoomTransition(target, options?) y finishZoomTransition(target?, options?) son ayudantes de JavaScript para transiciones de zoom desde elementos o rectángulos.
  • getPluginVersion() devuelve el marcador de versión de la implementación nativa.
  • navbarBack se dispara cuando se presiona el botón de atrás de la interfaz de usuario nativa.
  • navbarItemTap se dispara cuando se presiona un botón de acción de la barra de navegación nativa.
  • tabSelect se dispara cuando se selecciona una pestaña nativa.
  • safeAreaChanged reporta cambios en la barra y el área de seguridad de la pantalla nativa.
  • transitionStart y transitionEnd reporta límites de transición nativos.

iOS utiliza UINavigationBar y UITabBar. En iOS 26 y posteriores, el plugin permite que el sistema renderice el comportamiento de vidrio líquido; las versiones anteriores utilizan fallbacks de transparencia/material nativos.

Android utiliza una barra de herramientas de AppCompat y una navegación inferior de Material con colocación de borde a borde.

El plugin no crea una WebView nativa por ruta. La versión 1 mantiene un solo WebView Capacitor para estabilidad de puente y deja que la pantalla nativa se encargue solo de la ventana, la barra de visualización, la selección de pestañas, el área de seguridad y la caja de transición.

Sigue adelante desde @capgo/capacitor-navegación nativa

Sección titulada “Sigue adelante desde @capgo/capacitor-navegación nativa”

If you are using __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ para planificar la navegación nativa y el comportamiento de la interfaz, conecte __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ con @capgo/capacitor-native-navigation para la capacidad nativa en @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation @capgo/capacitor-native-navigation para la capacidad nativa en @capgo/capacitor-native-navigation @capgo/capacitor-live-activities para la capacidad nativa en @capgo/capacitor-live-activities @capgo/capacitor-live-activities para el detalle de implementación en @capgo/capacitor-live-activities @capgo/capacitor-video-player para la capacidad nativa en @capgo/capacitor-video-player @capgo/capacitor-video-player para los detalles de implementación en @capgo/capacitor-reproductor-de-videos.