En utilisant @capgo/capacitor-native-loader

@capgo/capacitor-native-loader Affiche les états de chargement à l'aide de vues iOS et Android natives. 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 l'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 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 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 terminée, restaure la vue WebView :

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

Barre de progression en haut comme dans Chrome

Utilisez le chargeur de progression natif en haut de la vue WebView lorsque vous voulez une barre de chargement similaire à celle d'un navigateur sans demander à 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 });

Utiliser

pour un chargeur de plein écran natif qui déplace la couleur autour de la bordure de l'écran pendant que la vue WebView reste visible. siri-v2 Pour un chargeur de plein écran natif qui déplace la couleur autour de la bordure de l'écran pendant 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 actifs embarqués sont les meilleurs pour les chargeurs de démarrage car ils sont disponibles avant les requêtes réseau et l'initialisation JavaScript.

Appels de plugin natif

Le plugin expose des API natives publiques afin qu'un 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)

Liens utiles

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

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

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

Native Loader

Tutoriel sur le chargeur natif