@capgo/capacitor-native-loader

Percorso di rendering nativo

Mostra i caricatori come viste di overlay UIKit e Android al posto di chiedere al WebView di animare effetti trasparenti 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

Usa caricature native Siri-style, Siri v2 edge, Chrome top progress, orbit, anello, pulsante, punti, barre, onda, halo, immagine, o caricature Lottie-based.

Funziona ovunque.

Attiva caricature da JavaScript, Swift, Kotlin o altri plugin nativi tramite il API nativo 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 a schermo intero trasparenti sopra il contenuto web
• barre di avanzamento Chrome-style che possono ridimensionare il WebView al posto di coprire il contenuto
• caricature ai bordi superiore, inferiore, sinistro o destro dell'app
• caricature intorno a un WebView ridimensionato mentre il contenuto nativo possiede parte dello schermo
• caricature di fallback native che sopravvivono a pesanti elaborazioni web, cambi di rotta o lavoro di avvio
• caricatori 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
SChrome top
Ring
Dots
Bars
onda
Orbit
Pulse
Halo
Around
Lottie
Immagine

Core API

• show(options) visualizza un caricamento e restituisce il suo id.
• update(options) aggiorna un caricamento esistente senza smontare l'overlay.
• setProgress(options) aggiorna il progresso di un caricamento determinato.
• hide(options) rimuove un caricamento.
• hideAll(options) rimuove tutti i caricamenti.
• setWebViewLayout(options) ridimensiona o inserisce la vista web/il corpo per far sì che i caricamenti nativi possano stare accanto a essa.
• resetWebViewLayout(options?) ripristina la disposizione originale della vista web/il corpo.
• getState() restituisce gli ID dei caricamenti attualmente visibili.
• configure(options) imposta lo stile predefinito, 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 ad un bordo sicuro-aware.
• chrome lo stile utilizza una barra superiore nativa di ampiezza intera 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 workflow di plugin nativo o di vista divisa.

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 e per connetterlo con Getting Started per i dettagli di implementazione, @capgo/capacitor-native-navigation per la disposizione del chrome e del WebView nativi, @capgo/capacitor-transitions per rotta web di movimento, e Utilizzando @capgo/capacitor-native-loader per il tutorial.