Pembebanan Nativ

Menggunakan @capgo/capacitor-native-loader

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

Pasang

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

Penglihatan Asli Penuh

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

Penglihatan Asli Penuh dengan Pengisian Sisi

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

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

Ketika pengisian selesai, kembalikan WebView:

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

Progress Top Chrome-Style

Gunakan penglihatan top progress loader asli ketika Anda ingin bar pengisian browser seperti di atas WebView tanpa meminta CSS untuk menganimasikan 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 });

Penglihatan Asli Penuh Siri V2

Gunakan siri-v2 untuk penglihatan asli penuh yang bergerak warna di sekitar sisi 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 });

Lottie Loader

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

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

Native Plugin Calls

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-Tautan Berguna

• GitHub: https://github.com/Cap-go/capacitor-loader-native/
• Dokumentasi: /docs/plugins/loader-native/

Teruskan dari Menggunakan @capgo/capacitor-loader-native

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.