@capgo/capacitor-native-navigation

ネイティブブラウザ

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

ウェブ所有ルート

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

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

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

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

現在のWebViewをキャプチャし、JavaScriptでコンテンツを更新し、nativeのsnapshot-to-WebViewアニメーションで終了します。

ズームルート

カード、グリッド、メディア詳細ルートを開き、共有要素スタイルのnativeズームジオメトリで

デモ

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

Core API

• configure(options?) ネイティブのChromeホストを有効化し、コンテンツのインセットを制御します。
• setNavbar(options) native title、サブタイトル、戻るボタン、ボタン、色、透明度、非表示化を更新します。
• setTabbar(options) タブ、選択中のタブ、バッジ、ラベル、アイコン、色、非表示化を更新します。
• beginTransition(options?) JavaScript ルート変更前に出発する WebView をキャプチャします。
• finishTransition(options?) ルート コンテンツが利用可能になった後、キャプチャしたスナップショットからライブ WebView までアニメーションします。
• beginZoomTransition(target, options?) and finishZoomTransition(target?, options?) ズーム トランジションの JavaScript ヘルパーです。要素または矩形から始まります。
• getPluginVersion() native implementation version マーカーを返します。

イベント

• navbarBack native back affordance がタップされたときに発火します。
• navbarItemTap native navbar action button がタップされたときに発火します。
• tabSelect native tab が選択されたときに発火します。
• safeAreaChanged native bar と safe-area inset の変更を報告します。
• transitionStart native transition boundary を報告します。 transitionEnd プラットフォーム モデル

プラットフォーム モデル

iOS 26 以降では、プラグインはシステムが Liquid Glass の動作をレンダリングすることを許可します。古いバージョンでは、native translucent/material のフォールバックを使用します。 UINavigationBar Android は AppCompat tool bar と Material の下部ナビゲーションを使用し、エッジからエッジまでの配置を使用します。 UITabBarプラグインは、1 つの native WebView を各ルートごとに作成しません。バージョン 1 では、__CAPGO_KEEP_0__ WebView を 1 つだけ維持し、native はフレーム、バーの視覚、タブの選択の Chrome、safe-area の報告、transition shell のみを所有します。

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation から続けてください。

@Capacitor/__CAPGO_KEEP_1__-native-navigation から続けてください。

@capgo/capacitor-native-navigation から続けてください。

If you are using __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ for native navigation, please connect it with __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation. @capgo/capacitor-native-navigation を使用して、ネイティブのメディアとインターフェイスの動作を計画し、__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationに接続してください。 Using capgo/capacitor for the native capability in capgo/capacitor-native-navigation. Using capgo/capacitor-native-navigation for the native capability in capgo/capacitor-native-navigation. Using capgo/capacitor-live-activities for the native capability in capgo/capacitor-live-activities. capgo/capacitor-live-activities @capgo/capacitor-live-activities for the implementation detail in capgo/capacitor-live-activities. Using capgo/capacitor-video-player for the native capability in Using capgo/capacitor-video-player. capgo/capacitor-video-player @capgo/capacitor-video-player capgo/capacitor-video-player 実装詳細については @capgo/capacitor-video-player に参照してください。