Chargeur natif plugin Capacitor

En utilisant @capgo/capacitor-native-loader

@capgo/capacitor-native-loader affiche les états de chargement à travers les vues natives iOS et Android. Utilisez-le lorsque le chargeur doit rester fluide pendant que la vue WebView est occupée, lorsque les effets de plein écran transparents sont coûteux en CSS, ou lorsque un autre plugin natif doit afficher l'interface de chargement avant que le JavaScript soit prêt.

Installer

npm install @capgo/capacitor-native-loader
npx cap sync

Chargeur de plein écran natif

import { NativeLoader } from '@capgo/capacitor-native-loader';

const { id } = await NativeLoader.show({
  style: 'siri',
  placement: 'fullscreen',
  message: 'Preparing your session',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  scrimColor: 'rgba(3, 7, 18, 0.42)',
  interactionMode: 'block',
});

await initializeAppData();
await NativeLoader.hide({ id });

Chargeur Edge avec redimensionnement de la vue WebView

await NativeLoader.setWebViewLayout({
  mode: 'inset',
  insets: { top: 96 },
  animated: true,
});

await NativeLoader.show({
  style: 'wave',
  placement: 'top',
  message: 'Syncing changes',
  interactionMode: 'passThrough',
});

Lorsque le chargement est terminé, restaurez la vue WebView :

await NativeLoader.hideAll({ restoreWebView: true });

Barre de progression Chrome-Style

Utilisez le chargeur de progression natif en haut lorsque vous souhaitez une barre de chargement similaire au navigateur au-dessus de la vue WebView sans demander au CSS d'animer pendant un travail lourd.

const { id } = await NativeLoader.show({
  style: 'chrome',
  placement: 'top',
  colors: ['#4285f4', '#34a853', '#fbbc05', '#ea4335'],
  thickness: 4,
  interactionMode: 'passThrough',
  webView: {
    mode: 'resize',
    insets: { top: 12 },
    restoreOnHide: true,
  },
});

await NativeLoader.hide({ id, restoreWebView: true });

Chargeur de bordure Siri V2

Utilisez siri-v2 Un chargement natif plein écran qui déplace les couleurs autour de l'arrière-plan de l'écran tout en maintenant la vue visible.

const { id } = await NativeLoader.show({
  style: 'siri-v2',
  placement: 'fullscreen',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  thickness: 10,
  scrimColor: 'rgba(3, 7, 18, 0.10)',
  interactionMode: 'passThrough',
});

await NativeLoader.hide({ id });

Lottie Loader

await NativeLoader.show({
  style: 'lottie',
  placement: 'center',
  asset: {
    type: 'lottie',
    source: 'loader.json',
    loop: true,
  },
});

Actifs intégrés sont les meilleurs pour les chargeurs de démarrage car ils sont disponibles avant les requêtes réseau et l'initialisation du JavaScript.

Appels de plugin natif

Le plugin expose des API natives publiques afin que l'autre plugin puisse montrer ou cacher les chargeurs directement.

Swift :

import CapgoCapacitorNativeLoader

let id = NativeLoader.shared.show(options: [
  "style": "orbit",
  "placement": "fullscreen",
  "message": "Opening secure session"
])

NativeLoader.shared.hide(id: id)

Kotlin :

import app.capgo.nativeloader.NativeLoader

val id = NativeLoader.show(
  activity = activity,
  options = mapOf(
    "style" to "orbit",
    "placement" to "fullscreen",
    "message" to "Loading profile",
  ),
  webView = bridge.webView,
)

NativeLoader.hide(id)

Lien utiles

• GitHub : https://github.com/Cap-go/capacitor-chargeur-natif/
• Documentation : /docs/plugins/chargeur-natif/

Continuez à partir de l'utilisation de @capgo/capacitor-native-loader

Si vous utilisez Utilisation de @capgo/capacitor-native-loader pour planifier le comportement des médias et de l'interface native, connectez-l’à @capgo/capacitor-chargement natif pour les détails d'implémentation, Prise en main for setup, Utilisation de @capgo/capacitor-native-navigation pour les layouts natifs de Chrome et WebView Utilisation de @capgo/capacitor-transitions pour la navigation dans WebView.