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

@capgo/capacitor-native-navigation

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

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

Web所有ルート

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

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

Native Navigation プラグイン プレビュー QR __CAPGO_KEEP_0__

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_KEEP_0__/__CAPGO_KEEP_1__-native-navigationを使用している場合 @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationを使用して Capgoから続けて@capgo/capacitor-native-navigationを使用して Capgoから続けて@capgo/capacitor-live-activitiesを使用 Capgoから続けて@capgo/capacitor-live-activitiesを使用して @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesを使用して Capgoから続けて@capgo/capacitor-video-player Capgoから続けて@capgo/capacitor-video-playerを使用 Capacitorのネイティブ機能を使用するために@capgo/capacitor-video-player、そして @capgo/capacitor-video-player Capacitorの@capgo/capacitor-video-playerの実装詳細のために