メインコンテンツにジャンプします
Capgo - Capacitor アプリ向けのリアルタイム更新 Capgo

@capgo/capacitor-native-navigation

iOSとAndroidのナビゲーションチームをJavaScriptが管理するルート、コンテンツ、アイコン、ラベル、バーの状態と同期させる。
はじめに GitHub

ネイティブブラウザ

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

Web所有ルート

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

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

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

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

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

ズームルート

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

デモ

「デモ」セクション
ネイティブシェルタップフロー
ネイティブナビゲーションシェルアニメーションネイティブナビゲーションタップフローアニメーション

Core API

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

イベント

「イベント」
  • navbarBack native back affordance がタップされたときに発火します。
  • navbarItemTap native navbar action button がタップされたときに発火します。
  • tabSelect native tab が選択されたときに発火します。
  • safeAreaChanged native bar と safe-area inset の変更を報告します。
  • transitionStart そして transitionEnd native transition boundaries を報告します。

プラットフォームモデル

「プラットフォームモデル」

iOSは UINavigationBar と UITabBariOS 26以降の場合、システムがLiquid Glassの動作をレンダリングするようにします。古いバージョンでは、ネイティブの透過性/マテリアルフォールバックを使用します。

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

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

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

「続けてください@capgo/capacitor-native-navigation」

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