@capgo/capacitor-native-navigation

iOSとAndroidのナビゲーションチームをJavaScriptがルート、コンテンツ、アイコン、ラベル、バーの状態を管理しながら、ネイティブにレンダリングします。

ネイティブのChrome

プラットフォームUIでWebコンポーネントではなく、上部のナビゲーションバーと下部のタブバーを描画します。

Webが管理するルート

ネイティブはユーザーの意図を表すイベントを発行し、既存のルーターはWebViewのコンテンツを変更します。

シリアライズされたアイコン

SVG、SF Symbol、バンドル画像、またはAndroid drawable descriptorを使用してタブとボタンを構成します。

ネイティブのトランジションシェル

現在のWebViewをキャプチャし、JavaScriptでコンテンツを更新し、ネイティブのスナップショットからWebViewへのアニメーションで終了します。

ルートのズーム

カード、グリッド、メディア詳細ルートを開き、共有要素スタイルのネイティブズームジオメトリを使用します。

デモ

ネイティブシェル	タップフロー

configure(options?) __CAPGO_KEEP_0__はネイティブクロームホストを有効にし、コンテンツインセットを制御します。
setNavbar(options) __CAPGO_KEEP_0__はネイティブタイトル、サブタイトル、バックボタン、ボタン、色、透明度、表示を更新します。
setTabbar(options) __CAPGO_KEEP_0__はタブ、選択されたタブ、バッジ、ラベル、アイコン、色、表示を更新します。
beginTransition(options?) __CAPGO_KEEP_0__をキャプチャする
finishTransition(options?) __CAPGO_KEEP_0__がルート変更後のJavaScriptの実行を待ってから、キャプチャされたスナップショットから実行中の__CAPGO_KEEP_0__にアニメーションする
beginZoomTransition(target, options?) そして finishZoomTransition(target?, options?) __CAPGO_KEEP_0__は、要素または四角形からズームトランジションのJavaScriptのヘルパーです。
getPluginVersion() __CAPGO_KEEP_0__が実装されているバージョンのマーカーを返します。

iOSでは UINavigationBar 、 UITabBar. iOS 26 以降では、プラグインはシステムが液体ガラスの動作をレンダリングすることを許可します。古いバージョンでは、ネイティブの透過的/マテリアルフォールバックが使用されます。

Androidでは、AppCompatツールバーとエッジトゥーエッジの配置のMaterialボトムナビゲーションが使用されます。

プラグインは、1つのネイティブのWebViewをルートごとに作成しません。バージョン1では、CapacitorのWebViewを1つだけ維持し、ネイティブはフレーム、バーのビジュアル、タブの選択、セーフエリアの報告、トランジションシェルを所有します。

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationを使用している場合 @capgo/capacitor-native-navigation native media とインターフェイスの動作を計画し、 @capgo/capacitor-native-navigation を使用 @capgo/capacitor-native-navigation のnative機能を使用 @capgo/capacitor-live-activities を使用 @capgo/capacitor-live-activities のnative機能を使用 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装詳細 @capgo/capacitor-video-player を使用 @capgo/capacitor-video-player のnative機能を使用 @capgo/capacitor-video-player @capgo/capacitor-video-player の実装詳細