Saltar al contenido
Capgo - Crea, publica y actualiza apps Capacitor Capgo

@capgo/capacitor-native-navigation

Render el chrome de navegación de iOS y Android de forma nativa, mientras JavaScript sigue controlando las rutas, el contenido, los iconos, las etiquetas y el estado de la barra.
Comenzar GitHub

Chrome nativo

Dibuja la barra de navegación superior y la de pestañas inferior con la UI de la plataforma en lugar de web components.

Rutas gestionadas por la web

Native emite eventos de intención del usuario y luego tu router actual cambia el contenido del WebView.

Iconos serializados

Configura pestañas y botones con SVG, SF Symbol, imágenes empaquetadas o descriptores drawable de Android.

Shell de transición nativa

Captura el WebView actual, actualiza el contenido en JavaScript y termina con una animación nativa de snapshot-to-WebView.

Rutas con zoom

Abre rutas de card, grid y media-detail con geometría de zoom nativa estilo shared-element.

Demo

Sección titulada “Demo”
Shell nativaFlujo de tapsNavbar multinivel (iOS)Navbar multinivel (Android)
Demo del shell de navegación nativa animada: navbar nativa, pestañas y contenido WebViewFlujo de navegación nativa animado: selección de pestaña, transición push y botón back nativoGrabación en iOS de filas de segmentos de la navbar multinivel: selector Cuenta / Organización sobre una fila de chips de secciónGrabación en Android de filas de segmentos de la navbar multinivel: selector Cuenta / Organización sobre una fila de chips de sección

Núcleo de API

Sección titulada “Core API”
  • configure(options?) habilita el host de chrome nativo y controla los insets del contenido.
  • setNavbar(options) actualiza el título nativo, subtítulo, botón back, botones, colores, transparencia, visibilidad y filas de segmentos multinivel bajo la barra (segments).
  • setTabbar(options) actualiza pestañas, pestaña seleccionada, badges, etiquetas, iconos, colores y visibilidad.
  • beginTransition(options?) captura el WebView saliente antes del cambio de ruta en JavaScript.
  • finishTransition(options?) anima desde la captura de pantalla al WebView en vivo una vez que el contenido de la ruta está listo.
  • beginZoomTransition(target, options?) y finishZoomTransition(target?, options?) son helpers de JavaScript para transiciones de zoom desde elementos o rectángulos.
  • getPluginVersion() devuelve el marcador de versión de la implementación nativa.

Eventos

Sección titulada “Eventos”
  • navbarBack se dispara cuando se toca el control de retroceso nativo.
  • navbarItemTap se dispara al tocar un botón de acción de la navbar nativa.
  • navbarSegmentSelect se dispara al seleccionar un elemento de una fila de segmentos de la navbar.
  • tabSelect se dispara cuando se selecciona una pestaña nativa.
  • safeAreaChanged notifica cambios de insets en barra nativa y área segura.
  • transitionStart y transitionEnd notifica los límites de las transiciones nativas.

Modelo de plataforma

Sección titulada “Modelo de plataforma”

iOS usa UINavigationBar y UITabBarEn iOS 26 y versiones posteriores, el plugin permite que el sistema renderice el comportamiento Liquid Glass; las versiones anteriores usan alternativas nativas translúcidas o de material.

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

El plugin no crea una WebView nativa por ruta. La versión 1 mantiene una única Capacitor WebView para la estabilidad del bridge y deja que lo nativo controle solo el marco, la apariencia de la barra, la selección de pestañas, el informe de áreas seguras y la transición.

Continúa desde @capgo/capacitor-native-navigation

Sección titulada “Continúa desde @capgo/capacitor-native-navigation”

Si estás usando @capgo/capacitor-native-navigation para planificar el comportamiento de los medios nativos y la interfaz, conéctalo con Uso de @capgo/capacitor-native-navigation para la capacidad nativa en Uso de @capgo/capacitor-native-navigation, Uso de @capgo/capacitor-live-activities para la capacidad nativa en Uso de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para los detalles de implementación en @capgo/capacitor-live-activities, Uso de @capgo/capacitor-video-player para la capacidad nativa en Uso de @capgo/capacitor-video-player, y @capgo/capacitor-video-player para el detalle de implementación en @capgo/capacitor-video-player.