Pembebanan Nativ

Menggunakan @capgo/capacitor-native-loader

@capgo/capacitor-native-loader Mengrenderkan keadaan muatan melalui penglihatan asli iOS dan Android. Gunakan plugin ini ketika loader perlu tetap halus sementara WebView sibuk, ketika efek fullscreen transparan mahal dalam CSS, atau ketika plugin asli lainnya perlu menampilkan UI muatan sebelum JavaScript siap.

Pasang

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

Loader Fullscreen Asli

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 });

Loader Pinggir Webview dengan Perubahan Ukuran

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

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

Ketika muatan selesai, kembalikan WebView:

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

Loader Progres Top Chrome-Style

Gunakan loader progres top asli native ketika Anda ingin bar muatan seperti browser di atas WebView tanpa meminta CSS untuk menganimasi selama pekerjaan berat.

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 });

Loader Pinggir Asli Siri V2

Gunakan siri-v2 untuk loader fullscreen asli yang bergerak warna di sekitar pinggir layar sementara WebView tetap terlihat.

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 });

Loader Lottie

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

Aset yang dibundel adalah yang terbaik untuk loader awal karena tersedia sebelum permintaan jaringan dan inisialisasi JavaScript.

Panggilan Plugin Asli

Plugin ini mengungkapkan API native publik sehingga plugin lain dapat menampilkan atau menyembunyikan loader secara langsung.

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)

Tautan Berguna

• GitHub https://github.com/Cap-go/capacitor-loader-asli/
• Dokumen: /docs/plugins/loader-asli/

Teruskan dari Menggunakan @capgo/capacitor-loader-asli

Jika Anda menggunakan Menggunakan @capgo/capacitor-native-loader untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan @capgo/capacitor-native-loader untuk detail implementasi, Getting Started untuk pengaturan, Menggunakan @capgo/capacitor-native-navigation untuk tata letak chrome native dan WebView, dan Menggunakan @capgo/capacitor-transitions untuk gerakan rute WebView.