Skip to content
Capgo - Live Updates for Capacitor Apps Capgo

@capgo/capacitor-native-ナビゲーション

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

ネイティブチャーム

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

ウェブ所有ルート

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

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

SVG、SF Symbol、組み込まれた画像、またはAndroid drawable descriptorを使用してタブとボタンを設定します。

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

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

ルートのズーム

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

デモ

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

Core API

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

イベント

native戻るアフォーダンスがタップされたときに発火します。
  • navbarBack イベント
  • navbarItemTap __CAPGO_KEEP_0__ native navbar action button がタップされたときに発火します。
  • tabSelect __CAPGO_KEEP_0__ native tab が選択されたときに発火します。
  • safeAreaChanged native bar と safe-area inset の変更を報告します。
  • transitionStart native transition boundaries を報告します。 transitionEnd プラットフォーム モデル

「プラットフォーム モデル」セクション

iOS は

iOS 26 以降では、プラグインはシステムが Liquid Glass の動作をレンダリングすることを許可します。古いバージョンでは、native translucent/material の fallback を使用します。 UINavigationBar Android は AppCompat toolbar と Material の下部ナビゲーションを使用し、エッジからエッジまでの配置を使用します。 UITabBarプラグインは、バージョン 1 では、1 つの __CAPGO_KEEP_0__ WebView を保持し、ブリッジの安定性を確保し、native がフレーム、バーの視覚、タブの選択、セーフエリアの報告、トランジションシェルのみを所有します。

そして

The plugin does not create one native WebView per route. Version 1 keeps a single Capacitor WebView for bridge stability and lets native own only the frame, bar visuals, tab selection chrome, safe-area reporting, and transition shell.

capgo/capacitor-native-ナビゲーションから続けて

「capgo/capacitor-native-ナビゲーションから続けて」

あなたが「__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-ナビゲーション」を使用している場合 「capgo/capacitor-native-ナビゲーション」 「__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-ナビゲーション」に接続して、ネイティブメディアとインターフェイスの動作を計画する 「capgo/capacitor-native-ナビゲーション」を使用してネイティブ機能を実装する 「capgo/capacitor-native-ナビゲーション」に「capgo/capacitor-native-ナビゲーション」を使用してネイティブ機能を実装する 「capgo/capacitor-ライブアクティビティ」 「capgo/capacitor-ライブアクティビティ」に「capgo/capacitor-ライブアクティビティ」を使用してネイティブ機能を実装する 「capgo/capacitor-ライブアクティビティ」 「capgo/capacitor-ライブアクティビティ」に「capgo/capacitor-ライブアクティビティ」を使用して実装詳細を実装する 「capgo/capacitor-ビデオプレーヤー」 ネイティブ機能の使用に@capgo/capacitor-video-playerを使用し、 @capgo/capacitor-video-player ネイティブ機能の実装詳細については@capgo/capacitor-video-playerを参照してください。