ネイティブChrome
Webコンポーネントの代わりに、プラットフォーム固有のUIを使用して、上部のナビゲーションバーと下部のタブバーを描画します。
Web管理のルート
Nativeがユーザーの操作イベントを発行し、既存のルーターがWebViewのコンテンツを切り替えます。
シリアライズ済みアイコン
SVG、SF Symbol、バンドルされた画像、またはAndroidのdrawable記述子でタブやボタンを設定できます。
Nativeトランジションシェル
現在のWebViewをキャプチャし、JavaScriptでコンテンツを更新した後、ネイティブのsnapshot-to-WebViewアニメーションで仕上げます。
ズームルート
カード、グリッド、メディア詳細のルートを、shared-elementスタイルのネイティブなズームジオメトリで開きます。
| ネイティブシェル | タップフロー | マルチレベルナビゲーションバー (iOS) | マルチレベルナビゲーションバー (Android) |
|---|---|---|---|
 |  |  |  |
コア API
「Core API」セクションconfigure(options?)ネイティブのChromeホストを有効にし、コンテンツのインセットを制御します。setNavbar(options)ネイティブのタイトル、サブタイトル、戻るボタン、ボタン、色、透明度、表示状態、およびバー下のマルチレベルセグメント行を更新します（segments).setTabbar(options)タブ、選択中のタブ、バッジ、ラベル、アイコン、色、および表示状態を更新します。beginTransition(options?)JavaScriptによるルート変更が行われる前に、遷移前のWebViewをキャプチャします。finishTransition(options?)ルートのコンテンツ準備が整った後、キャプチャしたスナップショットからライブのWebViewへとアニメーションで遷移します。beginZoomTransition(target, options?)とfinishZoomTransition(target?, options?)要素や矩形からのズーム遷移を行うためのJavaScriptヘルパーです。getPluginVersion()ネイティブ実装のバージョンマーカーを返します。
イベント
「Events」セクションnavbarBackネイティブの戻る操作がタップされたときに発火します。navbarItemTapネイティブのナビゲーションバーのアクションボタンがタップされたときに発火します。navbarSegmentSelectナビゲーションバーのセグメント行のアイテムが選択されたときに発火します。tabSelectネイティブのタブが選択されたときに発火します。safeAreaChangedネイティブのバーおよびセーフエリアのインセット変更を通知します。transitionStartとtransitionEndネイティブの遷移境界を通知します。
プラットフォームモデル
「プラットフォームモデル」というセクションiOSでは以下を使用します： UINavigationBar と UITabBariOS 26以降では、プラグインはシステムにLiquid Glassの挙動をレンダリングさせます。以前のバージョンでは、ネイティブの半透明/materialフォールバックを使用します。
Androidでは、AppCompatツールバーとedge-to-edge配置のMaterialボトムナビゲーションを使用します。
このプラグインはルートごとにネイティブWebViewを1つ作成するわけではありません。バージョン1ではブリッジの安定性を保つために単一の Capacitor WebViewを維持し、ネイティブ側が担当するのはフレーム、バーの見た目、タブ選択のクローム、セーフエリアのレポート、トランジションシェルのみです。
@capgo/capacitor-native-navigation から続ける
「@capgo/capacitor-native-navigation から続ける」というセクション使用している場合 @capgo/capacitor-native-navigation ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-native-navigation の活用 @capgo/capacitor-native-navigation を使用してネイティブ機能を利用する場合、 @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 @capgo/capacitor-video-player を使用する際のネイティブ機能については、 @capgo/capacitor-video-player @capgo/capacitor-video-player. の実装の詳細については
