En utilisant @capgo/capacitor-native-loader

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

Installer

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

Chargeur natif plein écran

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 de bord 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 la charge est terminée, restaurez la vue WebView :

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

Barre de progression Chrome-style en haut

Utilisez le chargeur de progression natif en haut pour obtenir une barre de chargement similaire à celle d'un navigateur sans demander au CSS d'animer pendant des travaux lourds.

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 bord Siri V2

Utilisez siri-v2 pour un chargeur plein écran natif qui déplace la couleur autour de l'écran de bord tandis que la vue WebView reste 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 });

Chargeur Lottie

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

Les ressources embarquées sont les meilleures pour les chargeurs de démarrage car elles sont disponibles avant les requêtes réseau et l'initialisation JavaScript.

Appels de plugin natifs

Le plugin expose des API natives publiques afin que l'autre plugin puisse afficher ou masquer 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)

Liens Utiles

GitHub: https://github.com/Cap-go/capacitor-loader-natif/
Docs: /docs/plugins/loader-natif/

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

Si vous utilisez En utilisant @capgo/capacitor-loader-natif pour planifier le comportement de la média et de l'interface native, connectez-le avec @capgo/capacitor-loader-natif pour les détails d'implémentation, Démarrage pour la configuration, Utilisation de @capgo/capacitor-navigation-native pour la mise en page native de Chrome et WebView, et Utilisation de @capgo/capacitor-transitions pour la motion des routes de WebView.

Native Loader

Tutoriel sur le chargeur natif