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

@capgo/capacitor-native-navigation

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

ネイティブブラウザ

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

Web所有ルート

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

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

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

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

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

ズーム ルート

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

デモ

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

コア API

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

イベント

ネイティブの戻る操作がタップされたときに発火します。
  • navbarBack イベント
  • navbarItemTap native navbar のアクション ボタンがタップされたときに発火します。
  • tabSelect native タブが選択されたときに発火します。
  • safeAreaChanged native バーとセーフエリアのインセットの変更を報告します。
  • transitionStart と transitionEnd native トランジション境界を報告します。

プラットフォーム モデル

プラットフォーム モデル

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

Android は AppCompat ツールバーとエッジから端までのマテリアル ボトム ナビゲーションを使用します。

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

Capgoから続けて@capgo/capacitor-native-navigation

「Capgoから続けて@capgo/capacitor-native-navigation」

Capgoから続けて@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationを使用している場合 @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationを使用して @capgo/capacitor-native-navigationのnative機能と @capgo/capacitor-live-activitiesのnative機能と @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 @capgo/capacitor-video-player Capgoから続けて@capgo/capacitor-live-activitiesを使用している場合 Capgoから続けて@capgo/capacitor-video-playerを使用している場合 Capacitorのネイティブ機能のために@capgo/capacitor-video-playerを使用し、 @capgo/capacitor-video-player Capacitorの実装詳細のために@capgo/capacitor-video-playerを使用します。