ネイティブレンダーパス
UIKITとAndroidオーバーレイビューとしてローダーを表示するのではなく、WebViewにアニメーションする費用のかかる透明効果を尋ねるのではなく。
フレキシブルな配置
ローダーをフルスクリーン、センター、エッジにピン、Chromeスタイルのトップ、またはWebViewに安全エリア認識のインセットを付けて表示します。
組み込まれたローダーとアセットローダー
ネイティブのSiriスタイル、Siri v2エッジ、Chromeトップの進行、オービット、リング、パルス、ドット、バー、ウェーブ、ハロ、イメージ、またはLottieベースのローダーを使用します。
呼び出せる場所
JavaScript、Swift、Kotlin、または他のネイティブプラグインからパブリックネイティブ API を通じてローダーをトリガーします。
@capgo/capacitor-native-loader ローダーを表示するときのスムーズ、透明、ネイティブな状態を維持するために使用します。
必要なときに使用してください:
- 透明なフルスクリーンローディングレイヤーをウェブコンテンツの上に表示
- ウェブビューをリサイズする代わりにコンテンツを覆わないChromeスタイルのトッププログレスバー
- アプリの上部、下部、左側、右側にエッジローダーを表示
- リサイズされたウェブビューの周りにローダーを表示し、ネイティブコンテンツが画面の一部を占める
- ネイティブフォールバックローダーが重いウェブレンダリング、ルート変更、または起動作業で生き残る
- JavaScriptが準備されていないときに別のネイティブプラグインによってトリガーされる共有ローダー
- Lottie、バンドル画像、またはリモートアセットをバックアップするローディングアニメーション
デモスタイル
「デモスタイル」というセクション| スタイル | プレビュー |
|---|---|
| Siri スタイルのネイティブローダープレビュー |  |
| Siri v2 フルスクリーンエッジネイティブローダープレビュー |  |
| Chrome スタイルの上部ネイティブローダープレビュー |  |
| Native Loaderを使用するには、ロード中の状態自体がネイティブである場合や、ロード中のWebViewをリサイズする必要がある場合に使用してください。 |  |
| ドット |  |
| バー |  |
| ウェーブ |  |
| オービット |  |
| パルス |  |
| ハロ |  |
| 周囲 |  |
| Lottie |  |
| Image |  |
コア API
セクション「コア API」show(options)表示するローダーとその値を返します。id.update(options)既存のローダーを更新するだけです。オーバーレイを破棄することはありません。setProgress(options)決定的なローダープログレスを更新します。hide(options)1 つのローダーを削除します。hideAll(options)すべてのローダーを削除します。setWebViewLayout(options)ウェブビュー/ボディのサイズを変更またはインセットして、ネイティブローダーが横に並ぶようにします。resetWebViewLayout(options?)元のウェブビュー/ボディレイアウトを復元します。getState()現在表示中のローダー ID を返します。configure(options)デフォルトのスタイル、配置、色、動き、動作を設定します。
配置モデル
「配置モデル」というセクションplacement ネイティブサーフェイスの表示位置を制御します:
fullscreen全体のアプリケーションをカバーし、オプションで半透明になります。centerウェブビューの上にコンパクトなローダーを浮かべます。top,bottom,leftとrightローダーを安全エリア認識可能なエッジに固定します。chromeスタイルは、フルウィドサのネイティブトップバーを使用し、webView.mode: 'resize'.around画面枠内でローダーモーションをレンダリングします。customネイティブプラグインまたはスプリットビューのワークフローで使用する際に明示的なフレームを使用します。
使用する interactionMode: 'passThrough' ユーザーがWebViewとインタラクティブに保持できる場合 block ロード中にタップを防止したい場合、または loaderOnly ローダーサーフェイスのみがタッチを受け取る場合
「@capgo/capacitor-native-loader」から続けてください。
セクションのタイトル「@capgo/capacitor-native-loader」から続けてください。Capgoを使用している場合 @capgo/capacitor-native-loader ネイティブのメディアとインターフェイスの動作を計画し、 Getting Started 実装の詳細については、 @capgo/capacitor-native-navigation ネイティブのChromeとWebViewレイアウトについては、 @capgo/capacitor-transitions Webルートの動きについては、 Using @capgo/capacitor-native-loader チュートリアルについては