@capgo/capacitor-caricatore nativo

Percorso di rendering nativo

Mostra i caricamenti come viste di overlay UIKit e Android al posto di chiedere al WebView di animare effetti traslucidi costosi.

Posizionamento flessibile

Colloca i caricamenti a schermo intero, centrati, fissi ad un bordo, Chrome-style in alto, o intorno al WebView con insetti di area sicura.

Caricamenti nativi e di risorse

Utilizza caricamenti Siri-style nativi, edge Siri v2, Chrome top progress, orbit, anello, pulsante, punti, barre, onda, halo, immagine o caricamenti Lottie basati.

Funziona ovunque

Attiva i caricamenti da JavaScript, Swift, Kotlin o altri plugin nativi tramite il API pubblico.

Quando Usarlo

@capgo/capacitor-native-loader è per gli stati di caricamento che dovrebbero rimanere lisci, trasparenti e nativi mentre il WebView è occupato, si sta ridimensionando, navigando o è nascosto dietro superfici native.

Usalo quando hai bisogno:

• layer di caricamento trasparenti a schermo intero sopra il contenuto web
• Barrature di avanzamento a stile Chrome che possono ridimensionare la vista web anziché coprire il contenuto.
• caricamenti agli angoli superiore, inferiore, sinistro o destro dell'app
• caricamenti intorno a un WebView ridimensionato mentre il contenuto nativo possiede parte dello schermo
• caricabatterie native che sopravvivono a pesanti elaborazioni web, cambi di rotta o lavori di avvio
• caricamenti condivisi attivati da un altro plugin nativo prima che JavaScript sia pronto
• Animazioni di caricamento basate su Lottie, immagini bundle o asset remoti

Nota

Per le animazioni di route web esclusivo, utilizza @capgo/capacitor-transizioni. Utilizza il caricatore nativo quando lo stato di caricamento stesso dovrebbe essere nativo o quando il WebView deve essere ridimensionato durante il caricamento.

Stili di Demo

Stile	Anteprima
Siri
Siri v2
Chrome superiore
Anello
Punti
Barre
Onda
Orbit
Pulse
Halo
Around
Lottie
Immagine

Core API

• show(options) visualizza un caricamento e restituisce il suo id.
• update(options) modifica un caricatore esistente senza smontare l'overlay.
• setProgress(options) aggiorna il progresso di un caricatore determinato.
• hide(options) rimuove un caricatore.
• hideAll(options) rimuove tutti i caricatori.
• setWebViewLayout(options) Aggiusta o inserisci la vista per consentire ai caricamenti nativi di essere posizionati accanto a essa.
• resetWebViewLayout(options?) ripristina la disposizione originale della vista web/body.
• getState() restituisce gli ID dei caricatori visibili attualmente.
• configure(options) imposta lo stile predefinito, posizione, colori, movimento e comportamento.

Modello di Posizionamento

placement controlla dove appare la superficie nativa:

• fullscreen copre l'intera app, eventualmente trasparente.
• center fa galleggiare un caricatore compatto sopra il WebView.
• top, bottom, left, e right pinza i caricatori ad un bordo sicuro-aware.
• chrome utilizza uno stile di barra superiore nativa a larghezza intera e si abbina bene con webView.mode: 'resize'.
• around rende la motricità del caricatore intorno al frame dello schermo.
• custom utilizza un frame esplicito per il workflow del plugin nativo o a schermo diviso.

Usa interactionMode: 'passThrough' quando gli utenti possono continuare ad interagire con il WebView. block quando il caricamento dovrebbe impedire i tocchi, o loaderOnly quando solo la superficie del caricatore dovrebbe ricevere tocchi.

Continua da @capgo/capacitor-caricatore nativo

Se stai utilizzando il @capgo/capacitor-caricatore nativo per pianificare il comportamento dei media e dell'interfaccia nativa, collegalo con Getting Started per dettagli di implementazione, il @capgo/capacitor-navigazione nativa per la disposizione del chrome e WebView nativa, il @capgo/capacitor-transizioni per la motilità delle rotte web, e Usa @capgo/capacitor-native-loader per il tutorial.