Skip to content
Capgo - Capacitor アプリのリアルタイム更新 Capgo

@capgo/capacitor-native-navigation

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

ネイティブのChrome

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

Web所有ルート

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

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

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

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

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

ルートをズーム

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

デモ

「デモ」というセクション
ネイティブシェルタップフロー
ネイティブナビゲーションシェルアニメーションを表示するデモ、ネイティブナビゲーションバー、タブ、WebViewコンテンツタブの選択、プッシュトランジション、ネイティブバックのアニメーションを表示するネイティブナビゲーションタップフロー

Core API

「Core API」というセクション
  • configure(options?) ネイティブクロームホストを有効にしてコンテンツのインセットを制御します。
  • setNavbar(options) nativeタイトル、サブタイトル、戻るボタン、ボタン、色、透明度、非表示を更新します。
  • setTabbar(options) タブ、選択されたタブ、バッジ、ラベル、アイコン、色、非表示を更新します。
  • beginTransition(options?) JavaScriptルート変更前に出発するWebViewをキャプチャします。
  • finishTransition(options?) ルートコンテンツが準備された後、キャプチャされたスナップショットからライブWebViewにアニメーションします。
  • beginZoomTransition(target, options?) 要素または矩形からズームトランジションのためのJavaScriptヘルパーです。 finishZoomTransition(target?, options?) ネイティブ実装バージョンマーカーを返します。
  • getPluginVersion() イベント

「イベント」セクション

ネイティブの戻るアフォーダンスがタップされたときに発火します。
  • navbarBack ネイティブのナビゲーションバーアクションボタンがタップされたときに発火します。
  • navbarItemTap ネイティブのタブが選択されたときに発火します。
  • tabSelect と
  • safeAreaChanged native bar と safe-area inset の変更を報告します。
  • transitionStart native transition boundary を報告します。 transitionEnd プラットフォーム モデル

プラットフォーム モデル

iOS は

iOS 26 以降では、プラグインはシステムが Liquid Glass の動作をレンダリングすることを許可します。古いバージョンでは、native translucent/material の fallback を使用します。 UINavigationBar Android は AppCompat tool bar と Material の bottom navigation を使用し、edge-to-edge の配置を使用します。 UITabBarプラグインは、1 つの native WebView を各ルートごとに作成しません。バージョン 1 は、bridge の安定性のために 1 つの __CAPGO_KEEP_0__ WebView を保持し、native はフレーム、バーの視覚、タブの選択、安全エリアのレポート、transition shell のみを所有します。

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

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

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

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

Capgoを使用している場合 @capgo/capacitor-native-navigation Capgoを使用してネイティブメディアとインターフェイスの動作を計画する場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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-live-activitiesを使用してください。 @capgo/capacitor-video-playerを使用してネイティブ機能を使用する場合、@capgo/capacitor-video-playerを使用してください。 @capgo/capacitor-video-playerを使用してください。 @capgo/capacitor-video-playerを使用してください。 @capgo/capacitor-video-playerを使用してください。 @capgo/capacitor-video-player.の実装詳細については、