@capgo/capacitor-native-loader

Percorso di rendering nativo

Mostra i caricamenti come viste di overlay UIKit e Android al posto di chiedere al WebView di animare effetti trasparenti 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, Siri v2 edge, Chrome top progress, orbit, anello, pulsante, punti, barre, onda, halo, immagine o caricamenti basati su Lottie.

Chiamabile in ogni dove

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

Quando Usarlo

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

Usalo quando hai bisogno:

• Layer di caricamento a schermo intero trasparente sopra il contenuto web
• Barre di caricamento a stile di Chrome che possono ridimensionare la WebView anziché coprire il contenuto
• Caricamenti ai bordi superiore, inferiore, sinistro o destro dell'app
• Caricamenti intorno a una WebView ridimensionata mentre il contenuto nativo possiede parte dello schermo
• Caricamenti di fallback nativi che sopravvivono a pesanti elaborazioni di rendering web, cambi di rotta o lavoro di avvio
• Caricamenti condivisi attivati da un altro plugin nativo prima che JavaScript sia pronto
• Animazioni di caricamento basate su Lottie, immagini incorporate o asset remoti

Nota

Per animazioni di rotta esclusivamente per web, utilizza @capgo/capacitor-transizioni. Utilizza il caricamento 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 top
Anello
Punti
Barre
Onda
Orbita
Pulsante
Aurora
Intorno
Lottie
Immagine

Core API

• show(options) mostra un caricatore e restituisce il suo id.
• update(options) modifica un caricatore esistente senza smontare l'overlay.
• setProgress(options) aggiorna il progresso del caricatore determinato.
• hide(options) elimina un caricatore.
• hideAll(options) elimina tutti i caricatori.
• setWebViewLayout(options) ridimensiona o inserisce la vista web per far sì che i caricatori nativi possano essere posizionati accanto.
• resetWebViewLayout(options?) ripristina la disposizione originale della vista web.
• getState() restituisce gli ID dei caricatori attualmente visibili.
• configure(options) imposta lo stile predefinito, la posizione, i colori, la movimento e il comportamento.

Modello di posizionamento

placement controlla dove appare la superficie nativa:

• fullscreen copre l'intera app, facoltativamente traslucida.
• center fa galleggiare un caricatore compatto sopra la vista web.
• top, bottom, lefte right aggancia i caricabatterie a un bordo sicuro consapevole.
• chrome lo stile utilizza una barra superiore nativa di ampiezza completa e si abbina bene con webView.mode: 'resize'.
• around rende la movimentazione del caricabatterie intorno al frame dello schermo.
• custom utilizza un frame esplicito per i flussi di lavoro plugin nativo o split-view.

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

Continua da @capgo/capacitor-native-loader

Se stai utilizzando @capgo/capacitor-native-loader per pianificare il comportamento dei media e dell'interfaccia nativa, connettilo con Iniziare per i dettagli di implementazione, @capgo/capacitor-navigazione-nativa per la disposizione di Chrome e WebView nativa, @capgo/capacitor-transizioni per la movimentazione delle route web, e Usando @capgo/capacitor-caricatore-nativo per il tutorial.