@capgo/capacitor-native-loader

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

始めましょう GitHub

ネイティブレンダーパス

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

フレキシブルな配置

ローダーをフルスクリーン、中央、エッジにピン、Chromeスタイルの先頭、またはWebViewに安全エリア認識のインセットで囲む。

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

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

呼び出せる場所はどこでも

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

When To Use It

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

使用する必要がある場合:

ウェブコンテンツの上に透過的なフルスクリーンロードレイヤー
Chromeスタイルのトッププロセスバーがウェブビューをリサイズするのではなく、コンテンツを隠さない
アプリの上部、下部、左側、右側にエッジローダー
ネイティブコンテンツが画面の一部を占める場合にリサイズされたウェブビュー周りにローダー
ネイティブコンテンツがウェブレンダリングが重い、ルート変更、または起動作業のときに生存するネイティブフォールバックローダー
JavaScriptが準備されていないときにトリガーされる共有ローダー
ネイティブアセット、バンドル画像、またはリモートアセットをバックアップしたローディングアニメーション

デモスタイル

スタイル	プレビュー
Siri
Siri v2
Chrome 上部
リング
ドット
バー
ウェーブ
オービット
Pulse
Halo
アラウンド
Lottie
イメージ

コア API

show(options) ローダーを表示し、そのIDを返します。 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 WebViewの上にコンパクトなローダーを浮かべます。
top, bottom, left安全エリアに注意したエッジにローダーを固定します。 right __CAPGO_KEEP_0__は、ネイティブトップバーのフルウィドスのスタイルを使用し、__CAPGO_KEEP_0__は__CAPGO_KEEP_1__とよく組み合います。
chrome 画面枠の周りでローダーモーションをレンダリングします。 webView.mode: 'resize'.
around __CAPGO_KEEP_0__は、ネイティブプラグインまたはスプリットビューのワークフロー用に明示的なフレームを使用します。
custom __CAPGO_KEEP_2__

__CAPGO_KEEP_3__の場合、ユーザーはWebViewとインタラクティブに続けることができます。 interactionMode: 'passThrough' __CAPGO_KEEP_4__の場合、ロード中にタップを防止する必要があります。 block __CAPGO_KEEP_5__の場合、ローダーサーフェイスのみがタッチを受け取る必要があります。 loaderOnly protectedTokens

続けてください @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」を参照してください Capgoを使用してネイティブローダー @capgo/capacitor-native-loader チュートリアル用に。