@capgo/capacitor-native-loader

ネイティブレンダーパス

UIKITとAndroidオーバーレイビューを表示するのではなく、WebViewにアニメーションを実行する費用の高い透過的な効果を要求するのではなく、ローダーを表示してください。

フリックスプレースメント

ローダーをフルスクリーン、中央、エッジにピン、Chromeスタイルのトップ、または安全エリアに意識したインセットでWebView周辺に配置してください。

組み込みローダーとアセットローダー

native Siriスタイル、Siri v2エッジ、Chrome上部進行、オービット、リング、パルス、ドット、バー、ウェーブ、ハロ、イメージ、またはLottieベースのローダーを使用します。

JavaScript、Swift、Kotlin、または他のネイティブプラグインからJavaScriptの__CAPGO_KEEP_0__を使用してローダーをトリガーします。

Trigger loaders from JavaScript, Swift, Kotlin, or other native plugins through the public native API.

「使用するとき」セクション

@capgo/capacitor-native-loader 使用する必要があるときは次のとおりです:

透過的フルスクリーンロードレイヤーをWebコンテンツの上に表示します。

• Chromeスタイルの上部進行バーを使用して、WebViewをリサイズする代わりにコンテンツを隠さないようにします。
• アプリの上部、下部、左側、右側にエッジローダーを使用します。
• ネイティブコンテンツが画面の一部を占有するときに、リサイズされたWebViewの周りにローダーを表示します。
• ネイティブフォールバックローダーを使用して、重いWebレンダリング、ルート変更、または起動作業を乗り越えます。
• native fallback loaders that survive heavy web rendering, route changes, or startup work
• JavaScriptが準備されていない間に、他のネイティブ プラグインによってトリガーされる共有ローダー
• ロッティ、バンドル画像、またはリモートアセットをバックアップするロードアニメーション

注記

ウェブ専用ルートアニメーションの場合に使用してください @capgo/capacitor-transitions. Native Loaderを使用するには、ロード中の状態自体がネイティブである場合や、WebViewをロード中にリサイズする必要がある場合に使用してください。

デモスタイル

スタイル	プレビュー
サリー
Siri v2
Chrome の上部
Ring
Dots
バーソケット
波
Orbit
パルス
ハロ
アラウンド
Lottie
イメージ

Core API

• show(options) ローダーを表示し、その id.
• update(options) 既存のローダーを変更する際にオーバーレイを破棄せずに
• setProgress(options) 決定的なローダープログレスを更新する
• hide(options) ローダーを1つ削除する
• hideAll(options) すべてのローダーを削除する
• setWebViewLayout(options) WebView/ボディのサイズを変更またはインセットして、ネイティブローダーが横に並ぶようにする
• resetWebViewLayout(options?) WebView/ボディの元のレイアウトを復元する
• getState() 現在表示中のローダーIDを取得する
• configure(options) デフォルトのスタイル、配置、色、動き、挙動を設定する

配置モデル

placement ネイティブサーフェイスの表示位置を制御します:

• fullscreen アプリ全体をカバーし、オプションで半透明になります。
• center ウェブビュー上にコンパクトなローダーを浮かべます。
• top, bottom, left、 right 安全エリアに意識したエッジにローダーを固定します。
• chrome スタイルはネイティブトップバーをフル幅で使用し、 webView.mode: 'resize'.
• around 画面枠周りにローダーモーションをレンダリングします。
• custom ネイティブプラグインまたはスプリットビューのワークフローで使用する際に、明示的なフレームを使用します。

使用する interactionMode: 'passThrough' ユーザーはウェブビューと同時に操作できる場合 block タップを防止するときは、 loaderOnly ローダー表面だけがタップを受け取る時は。

「@capgo/capacitor-native-loader」から続けてください。

Capgoを使用している場合 「@capgo/capacitor-native-loader」 ネイティブメディアとインターフェイスの動作を計画するには、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loaderを使用します。 実装の詳細については、「Getting Started」を参照してください。 「@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation」 ネイティブのChromeとWebViewレイアウトについては、「@capgo/capacitor-native-navigation」を参照してください。 「@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions」 「@capgo/capacitor-transitions」 ウェブルートの動き、そして Using @capgo/capacitor-native-loader チュートリアル用