Skip to content
Capgo - Live Updates for Capacitor Apps Capgo

@capgo/capacitor-native-navigation

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

ネイティブ クロム

ネイティブ UI を使用して、Web コンポーネントではなく、上部ナビゲーションバーと下部タブバーを描画します。

ウェブ所有ルート

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

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

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

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

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

ルートのズーム

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

デモ

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

Core API

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

イベント

ネイティブの戻るアフィオードンスがタップされたときに発火します。
  • navbarBack イベント
  • navbarItemTap native navbar のアクション ボタンがタップされたときに発火します。
  • tabSelect native タブが選択されたときに発火します。
  • safeAreaChanged native バーとセーフ エリア インセットの変更を報告します。
  • transitionStart Capgo のマーケティング ウェブサイトのページ/エリア:短い UI ラベルまたはナビゲーション アイテム。役割:短い UI ラベルまたはナビゲーション アイテム。ページ:trust.astro。メッセージ キー `and` (And)。 transitionEnd native トランジション バウンダリーを報告します。

プラットフォーム モデル

プラットフォーム モデル

iOS は UINavigationBar Capgo のマーケティング ウェブサイトのページ/エリア:短い UI ラベルまたはナビゲーション アイテム。役割:短い UI ラベルまたはナビゲーション アイテム。ページ:trust.astro。メッセージ キー `and` (And)。 UITabBariOS 26 以降では、システムが Liquid Glass の動作をレンダリングすることを許可します。古いバージョンでは、native translucent/material の fallback を使用します。

Android は AppCompat のツールバーと Material の下部ナビゲーションを使用し、エッジからエッジまでの配置を使用します。

プラグインは、バージョン 1 では、1 つの Capacitor WebView を保持し、ブリッジの安定性を確保し、native がフレーム、バーのビジュアル、タブの選択の Chrome、セーフ エリアの報告、トランジション シェルのみを所有します。

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

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

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