@capgo/capacitor-native-loader

Web View 上で、iOS と Android のネイティブビューを使用して、ポリッシュローダーを上、下、周囲、または代わりにレンダリングします。

スタート GitHub

Native レンダリングパス

UIKitとAndroidオーバーレイビューとしてローダーを表示するのではなく、WebViewに高コストの透過効果をアニメーションさせるのを尋ねるのではなく。

位置の柔軟性

ローダーをフルスクリーン、中央、エッジにピン、Chromeスタイルの先頭、または安全エリアに意識したインセットと共にWebView周辺に配置する。

組み込まれたローダーとアセットローダー

ネイティブのSiriスタイル、Siri v2エッジ、Chrome先頭の進行状況、オービット、リング、パルス、ドット、バー、ウェーブ、ハロ、イメージ、またはLottieベースのローダーを使用する。

呼び出し可能な場所はどこでも

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

使用するとき

@capgo/capacitor-native-loader WebViewが忙しい、リサイズ中、ナビゲート中、またはネイティブサーフェイスの下に隠されているときに、ロード状態が滑らか、半透明、ネイティブのままになるようにするために使用します。

使用する必要がある場合

ウェブコンテンツの上に透明なフルスクリーンロードレイヤー
Chromeスタイルのトッププログレスバーがウェブビューをリサイズするのではなく、コンテンツを隠さないようにする
アプリの端にローダーを表示する
リサイズされたウェブビューの周りにローダーを表示する
ネイティブコンテンツが画面の一部を占有する場合のウェブビューの周りにローダーを表示する
重いウェブレンダリング、ルート変更、または起動作業のときに生存するネイティブフォールバックローダー
JavaScriptが準備されていないときにトリガーされる共有ローダーを使用する別のネイティブプラグイン

Demo Styles

Style	Preview
Siri
Siri v2
Chrome 上部
Ring
Dots
Bars
Wave
Orbit
パルス
ハロ
アラウンド
Lottie
Image

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 __CAPGO_KEEP_0__でネイティブサーフェイスが現れる場所を制御します:

fullscreen __CAPGO_KEEP_0__は、オプションで半透明の場合、全アプリケーションをカバーします。
center __CAPGO_KEEP_0__は、コンパクトなローダーをWebViewの上に浮かべて表示します。
top, bottom, left, and right __CAPGO_KEEP_0__は、安全エリアに注意したエッジにローダーを固定します。
chrome __CAPGO_KEEP_0__は、ネイティブトップバーのフルウィドスのスタイルを使用し、__CAPGO_KEEP_0__とよく相性が良いです。 webView.mode: 'resize'.
around __CAPGO_KEEP_0__は、スクリーン枠の周りにローダーモーションをレンダリングします。
custom __CAPGO_KEEP_0__は、ネイティブプラグインまたはスプリットビューのワークフロー用に明示的なフレームを使用します。

__CAPGO_KEEP_0__ interactionMode: 'passThrough' __CAPGO_KEEP_0__の場合、ユーザーはWebViewと相互作用できます。 block __CAPGO_KEEP_0__の場合、ロード中にタップを防止したい、または loaderOnly __CAPGO_KEEP_0__の場合、ローダーサーフェイスのみがタッチを受け取るようにします。

@capgo/capacitor-native-loader

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__を使用している場合 @capgo/capacitor-native-loader @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__をnativeメディアとインターフェイスの動作計画に接続する @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__ @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loaderの実装詳細については @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-chromeとWebViewレイアウトについて @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__のウェブルートモーションについて @capgo/capacitor-native-loaderの使用 for the tutorial.