Utilisation de @capgo/capacitor-chargeur-natif

@capgo/capacitor-native-loader rendre les états de chargement à travers les vues iOS et Android natives. Utilisez-le lorsque le chargeur doit rester fluide tandis que la vue Web est occupée, lorsque les effets d'écran transparents pleins écran 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 Web

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, restaurez la vue Web :

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

Barre de progression Chrome-style en haut

Utilisez le chargeur de progression natif en haut de la vue Web 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 });

Chargeur de bord Siri V2

Utilisez siri-v2 pour un chargeur plein écran natif qui déplace la couleur autour de l'arête de l'écran tandis que la vue Web 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 de JavaScript.

Appels de plugins natifs

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-loader-natif/
Docs: /docs/plugins/loader-natif/

Continuez de l'Utilisation @capgo/capacitor-loader-natif

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

Chargement natif

Tutoriel sur le chargeur natif