Saltar al contenido

@capgo/capacitor-navegación nativa

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

chrome nativo

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

Native emite eventos de intención de usuario, luego tu router existente cambia el contenido de la WebView.

Iconos serializados

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

Conjunto de transición nativa

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

Rutas de zoom

Abre rutas de tarjeta, mosaico y detalles de medios con geometría de zoom de elementos compartidos estilo nativo.

Concha nativaFlujo de toque
Demostración animada de concha de navegación nativa mostrando barra de navegación nativa, pestañas y contenido de WebViewFlujo de toque de navegación nativa animado mostrando selección de pestaña, transición de empuje y botón de atrás nativo
  • configure(options?) habilita el host de chrome 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 son ayudantes de JavaScript para transiciones de zoom desde elementos o rectángulos. finishZoomTransition(target?, options?) devuelve el marcador de versión de implementación nativa.
  • getPluginVersion() Sección titulada “Eventos”

dispara cuando se toca la oferta de retroceso nativa.

dispara cuando se toca un botón de acción de menú de navegación nativa.
  • navbarBack dispara cuando se selecciona una pestaña nativa.
  • navbarItemTap informa cambios en los recuadros de área segura y de la barra nativa.
  • tabSelect y
  • safeAreaChanged informa límites de transición nativa.
  • transitionStart Modelo de plataforma transitionEnd y son ayudantes de JavaScript para transiciones de zoom desde elementos o rectángulos.

y son ayudantes de JavaScript para transiciones de zoom desde elementos o rectángulos.

Sección titulada “Modelo de plataforma”

iOS utiliza UINavigationBar y UITabBar. En iOS 26 y posteriores, el complemento permite que el sistema renderice el comportamiento de vidrio líquido; las versiones más antiguas utilizan reemplazos de material translúcido/nativo.

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

El complemento no crea un WebView nativo por ruta. La versión 1 mantiene un único Capacitor WebView para estabilidad de puente y deja que el nativo tenga solo el marco, la barra de visualización, la selección de pestañas, el informe de área segura 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”

Si estás utilizando @capgo/capacitor-navegación nativa para planificar el comportamiento de medios y interfaz nativa, conecta con Usando @capgo/capacitor-navegación nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos, y @capgo/capacitor-reproductor-de-videos para el detalle de implementación en @capgo/capacitor-reproductor-de-videos