使用@capgo/capacitor-ネイティブローダー
@capgo/capacitor-native-loader ネイティブiOSおよびAndroidビューを通じてロード状態をレンダリングします。 WebViewが忙しいときにローダーが滑らかに動作するようにする、CSSで透明なフルスクリーン効果を高価にする、またはJavaScriptが準備されていないときに別のネイティブプラグインがロードUIを表示する必要がある場合に使用してください。
インストール
npm install @capgo/capacitor-native-loader
npx cap sync
フルスクリーンローダー
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 });
エッジローダーにWebViewをリサイズ
await NativeLoader.setWebViewLayout({
mode: 'inset',
insets: { top: 96 },
animated: true,
});
await NativeLoader.show({
style: 'wave',
placement: 'top',
message: 'Syncing changes',
interactionMode: 'passThrough',
});
ロードが完了したときにWebViewを元に戻す:
await NativeLoader.hideAll({ restoreWebView: true });
Chromeスタイルのトッププログレス
ネイティブトッププログレスローダーを使用して、WebViewの上にブラウザのようなロードバーを表示したい場合は、CSSが重い作業中にアニメーションするのを求めることなく使用してください。
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 });
シリV2エッジローダー
使用 siri-v2 ウェブビューが表示されながら、画面の端に色が動くネイティブフルスクリーンローダーを使用します。
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 });
ロティローダー
await NativeLoader.show({
style: 'lottie',
placement: 'center',
asset: {
type: 'lottie',
source: 'loader.json',
loop: true,
},
});
バンドルされたアセットは、ネットワークリクエストとJavaScriptの初期化が完了する前に利用できるため、起動時ローダーとして最適です。
ネイティブプラグインコール
プラグインは、ローダーを直接表示または非表示にするために別のプラグインが公開するネイティブAPIを公開します。
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)
便利なリンク
- GitHub: https://github.com/Cap-go/capacitor-native-loader/
- ドキュメント: /docs/plugins/native-loader/
Capacitor Native Loaderから続けて@capgo/capacitor-native-loaderを使用
Capacitor Native Loaderを使用している場合 @capgo/capacitor-native-loaderを使用して nativeメディアとインターフェイスの動作を計画するには、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loaderを接続する 実装の詳細については、@capgo/capacitor-native-loaderを参照 Getting Started セットアップについては セットアップのために、 @capgo/capacitor-native-ナビゲーション native chrome と WebView のレイアウトのために @capgo/capacitor-トランジションを使用 Capacitor Native Loaderを使用している場合