Saltar al contenido
Capgo - Actualizaciones en vivo para aplicaciones Capacitor Capgo

@capgo/capacitor-navegación nativa

Renderizar el navegador de iOS y Android nativamente mientras JavaScript mantiene el control de las rutas, el contenido, los iconos, los títulos y el estado de la barra.
Empezar GitHub

Navegación Nativa de Chrome

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

Rutas propiedad de la web

La Navegación Nativa emite eventos de intención del usuario, luego su 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.

Concha de transición nativa

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

Zoom de rutas

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

Demo

Título de la sección “Demo”
Concha nativaFlujo de toque
Demo animado de navegación nativa que muestra una concha de navegación nativa, pestañas y contenido de WebView.Demo animado de flujo de toque de navegación nativa que muestra la selección de pestañas, la transición de empuje y la navegación nativa hacia atrás.

Core API

Sección titulada “Núcleo API”
  • 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 las pestañas, pestaña seleccionada, etiquetas, iconos, colores y visibilidad.
  • beginTransition(options?) Captura la WebView saliente antes del cambio de ruta en 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 la marca de versión de la implementación nativa.

Eventos

Sección titulada “Eventos”
  • navbarBack dispara cuando se toca la oferta de atrás nativa.
  • navbarItemTap dispara cuando se presiona un botón de acción de la barra de navegación nativa.
  • tabSelect dispara cuando se selecciona una pestaña nativa.
  • safeAreaChanged informa los cambios en los márgenes de la barra y la zona segura.
  • transitionStart y transitionEnd informa los límites de la transición nativa.

Modelo de plataforma

Sección titulada “Modelo de plataforma”

iOS utiliza UINavigationBar y UITabBariOS 26 y posteriores utilizan el sistema para renderizar el comportamiento de vidrio líquido; las versiones anteriores utilizan fallbacks de transparencia material nativa.

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 nativa tenga solo el marco, la barra de visualización, la selección de pestañas, la zona segura y la caja de transición.

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

Título de la sección “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.