Langsung ke konten utama
Capgo logo
Kembali ke plugin
@capgo/capacitor-native-loader
Tutorial
@capgo/capacitor-native-loader

Pembebanan Asli

Tampilkan animasi loader native, overlay transparan, asset Lottie, dan keadaan muat WebView dari JavaScript atau native code

Unduhan/bulan

0

GitHub Bintang

2

Petunjuk

Tutorial tentang Loader Native

Menggunakan @capgo/capacitor-native-loader

@capgo/capacitor-native-loader Mengrender keadaan muat melalui tampilan native iOS dan Android. Gunakanlah ketika loader perlu tetap halus sementara WebView sibuk, ketika efek fullscreen transparan mahal dalam CSS, atau ketika plugin native lainnya perlu menampilkan UI muat sebelum JavaScript siap.

Pasang

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

Fullscreen Native Loader

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 Pintar di Tepi Layar

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

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

Saat proses loading selesai, restor WebView:

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

Loader Progres di Atas Layar

Gunakan loader progres native di atas layar untuk mendapatkan pengalaman loading seperti browser 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 });

Siri V2 Edge Loader

Gunakan siri-v2 untuk loader layar penuh native yang bergerak warna di sekitar 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,
  },
});

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

Panggilan Plugin Native

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 Bermanfaat

Teruskan dari Menggunakan @capgo/capacitor-loader-alam-tertua

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