@capgo/capacitor-native-loader

Percorso di rendering nativo

Mostra i caricatori come viste di overlay UIKit e Android anziché chiedere al WebView di animare effetti traslucidi costosi.

Posizionamento flessibile

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

Caricatori incorporati e di risorse

Utilizza caricamenti nativi dello stile Siri, edge Siri v2, barre di avanzamento Chrome in alto, orbita, anello, pulsante, punti, barre, onda, halo, immagine o caricamenti basati su Lottie.

Chiamabile in ogni punto.

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

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 a schermo intero trasparente sopra il contenuto web
• barre di avanzamento Chrome-stile in alto che possono ridimensionare il WebView al posto di coprire il contenuto
• caricamenti di edge in alto, in basso, a sinistra o a destra dell'app
• caricamenti intorno a un WebView ridimensionato mentre il contenuto nativo possiede una parte dello schermo
• caricamenti di fallback nativi che sopravvivono a pesanti elaborazioni web, cambiamenti di rotta o lavoro di avvio
• caricabili condivisi attivati da un altro plugin nativo prima che JavaScript sia pronto
• animazioni di caricamento basate su Lottie, immagini incorporate o risorse remote

Nota

Per 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 in alto
Anello
Punti
Barre
Onda
Orbit
Pulse
Halo
Around
Lottie
Immagine

Core API

• show(options) visualizza un caricamento e restituisce i suoi id.
• update(options) modifica un caricamento esistente senza smontare l'overlay.
• setProgress(options) aggiorna il progresso di un caricamento determinato.
• hide(options) elimina un caricamento.
• hideAll(options) elimina tutti i caricamenti.
• setWebViewLayout(options) adatta o inserisce la dimensione della WebView/corpo per far sì che i caricamenti nativi possano essere posizionati accanto a essa.
• resetWebViewLayout(options?) ripristina la disposizione originale della WebView/corpo.
• getState() restituisce gli ID dei caricamenti attualmente visibili.
• configure(options) imposta lo stile di default, la posizione, i colori, la movenza e il comportamento.

Modello di posizionamento

placement controlla dove appare la superficie nativa:

• fullscreen copre l'intera app, facoltativamente trasparente.
• center fa galleggiare un caricatore compatto sopra il WebView.
• top, bottom, left, e right pinza i caricatori a un bordo sicuro-aware.
• chrome lo stile utilizza una barra superiore nativa di ampiezza completa e si abbina bene con webView.mode: 'resize'.
• around rende in moto il 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 caricamento dovrebbe ricevere tocchi.

Continua da @capgo/capacitor-native-loader

Se stai utilizzando @capgo/capacitor-native-loader per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con Avvio rapido per dettagli di implementazione, @capgo/capacitor-native-navigation per la disposizione del chrome e WebView nativi, @capgo/capacitor-transizioni per rotta web di movimento, e Utilizzare @capgo/capacitor-native-loader per il tutorial.