@capgo/capacitor-cargador nativo

Ruta de renderizado nativo

Mostrar cargadores como vistas de overlay de UIKit y Android en lugar de pedirle al WebView que anime efectos transparentes costosos.

Posición flexible

Coloque los cargadores en pantalla completa, centrados, pegados a un borde, estilo Chrome en la parte superior, o alrededor del WebView con ajustes de área segura.

Cargadores integrados y de recursos

Utilice cargadores nativos estilo Siri, borde de Siri v2, barras de progreso de Chrome en la parte superior, órbita, anillo, pulsación, puntos, barras, onda, halo, imagen o cargadores basados en Lottie.

Llamable en cualquier lugar.

Activar cargadores desde JavaScript, Swift, Kotlin u otros plugins nativos a través del API nativo público.

Cuándo Usarlo

@capgo/capacitor-native-loader es para estados de carga que deben permanecer suaves, translúcidos y nativos mientras el WebView está ocupado, redimensionado, navegando o oculto detrás de superficies nativas.

Utilícelo cuando necesite:

• capas de carga transparentes en pantalla completa sobre contenido web
• barras de progreso de Chrome en la parte superior que pueden redimensionar el WebView en lugar de cubrir el contenido
• cargadores en el borde superior, inferior, izquierdo o derecho de la aplicación
• cargadores alrededor de un WebView redimensionado mientras el contenido nativo posee parte de la pantalla
• cargadores de fallback nativos que sobreviven a la renderización web intensa, cambios de ruta o trabajo de arranque
• cargadores compartidos desencadenados por otro plugin nativo antes de que esté lista la JavaScript
• animaciones de carga respaldadas por Lottie, imagen embutida o recurso remoto

Nota

Para animaciones de ruta web únicamente, utilice @capgo/capacitor-transiciones. Utilice Native Loader cuando el estado de carga en sí debe ser nativo o cuando el WebView necesita ser reajustado mientras se carga.

Estilos de demostración

Estilo	Vista previa
Siri
Siri v2
Chrome superior
Anillo
Puntos
Barras
Ola
Orbit
Pulso
Halo
Alrededor
Lottie
Imagen

Núcleo API

• show(options) muestra un cargador y devuelve su id.
• update(options) actualiza un cargador existente sin destruir la capa de sobreposición.
• setProgress(options) actualiza el progreso del cargador determinado.
• hide(options) elimina un cargador.
• hideAll(options) elimina todos los cargadores.
• setWebViewLayout(options) ajusta o inserta el layout de la WebView/cuerpo para que los cargadores nativos puedan estar junto a ella.
• resetWebViewLayout(options?) restaura el layout original de la WebView/cuerpo.
• getState() devuelve los IDs de los cargadores visibles actualmente.
• configure(options) establece el estilo predeterminado, la colocación, los colores, la movilidad y el comportamiento.

Modelo de colocación

placement donde aparece la superficie nativa:

• fullscreen oculta toda la aplicación, opcionalmente transparente.
• center flota un cargador compacto sobre la WebView.
• top, bottom, left, y right adhiere cargadores a una orilla segura y consciente de la zona segura.
• chrome el estilo utiliza una barra superior nativa de ancho completo y se combina bien con webView.mode: 'resize'.
• around renderiza la animación del cargador alrededor del marco de pantalla.
• custom usa un marco explícito para el flujo de trabajo de plugin nativo o de vista dividida.

Usar interactionMode: 'passThrough' cuando los usuarios pueden seguir interactuando con la WebView, block cuando se debe evitar los toques, o loaderOnly cuando solo la superficie del cargador debe recibir toques.

Sigue adelante desde @capgo/capacitor-cargador-nativo

Si estás utilizando @capgo/capacitor-cargador-nativo para planificar el comportamiento de medios y interfaz nativos, conecta con Getting Started para detalles de implementación, @capgo/capacitor-navegación-nativa para la disposición de chrome y WebView nativos, @capgo/capacitor-transiciones para la ruta de movimiento web, y Usando @capgo/capacitor-cargador nativo para el tutorial.