__CAPGO_KEEP_0__ __CAPGO_KEEP_5__
@capgo/capacitor-ナビゲーションバー UI & システム オープンソース

ナビゲーションバー Capacitor プラグイン

Android ナビゲーションバーのカラーと可視性をカスタマイズして、インマーシブUI体験を実現します。

インストール

bun add @capgo/capacitor-navigation-bar bunx cap sync
npm、pnpmまたはyarn
  • npm install @capgo/capacitor-navigation-bar
  • pnpm add @capgo/capacitor-navigation-bar
  • yarn add @capgo/capacitor-navigation-bar

ガイド

How to use Navigation Bar in Capacitor

デバイスでテスト

Capgoアプリをダウンロードし、QR codeをスキャンしてください。

アプリストア Google Play
ナビゲーションバー プラグインのプレビュー QR code

@capgo/capacitor-navigation-barを使用

Capacitorのナビゲーションバー プラグイン

インストール

bun add @capgo/capacitor-navigation-bar
bunx cap sync

このプラグインが公開するもの

  • setNavigationBarColor - ナビゲーションバーの色とボタンのテーマを設定
  • getNavigationBarColor - 現在のナビゲーションバーの色とボタンのテーマを取得

例の使用方法

setNavigationBarColor

ナビゲーションバーの色とボタンのテーマを設定します。

import { NavigationBar, NavigationBarColor } from '@capgo/capacitor-navigation-bar';

// Set to white with dark buttons
await NavigationBar.setNavigationBarColor({
  color: NavigationBarColor.WHITE,
  darkButtons: true
});

// Set to custom color
await NavigationBar.setNavigationBarColor({
  color: '#FF5733',
  darkButtons: false
});

// Set a custom divider color on Android 9+
await NavigationBar.setNavigationBarColor({
  color: NavigationBarColor.WHITE,
  darkButtons: true,
  dividerColor: '#D9D9D9'
});

getNavigationBarColor

現在のナビゲーションバーの色とボタンのテーマを取得します。

import { NavigationBar } from '@capgo/capacitor-navigation-bar';

const { color, darkButtons } = await NavigationBar.getNavigationBarColor();
console.log('Current color:', color);
console.log('Using dark buttons:', darkButtons);

フルリファレンス

Using @capgo/capacitor-navigation-bar

Capacitorを使用してネイティブメディアとインターフェイスの動作を計画している場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigation-barを接続してください。 Using @capgo/capacitor-navigation-bar プラグインを使用してネイティブのメディアとインターフェイスの動作を計画し、接続する Capacitorを使用してネイティブメディアとインターフェイスの動作を計画している場合、@capgo/capacitor-navigation-barを接続してください。 Capacitorを使用してネイティブメディアとインターフェイスの動作を計画している場合、@capgo/capacitor-navigation-barを接続してください。 はじめに はじめにの実装詳細については @capgo/capacitor-live-activitiesを使用する @capgo/capacitor-live-activitiesのネイティブ機能については @capgo/capacitor-ライブアクティビティ @capgo/capacitor-live-activitiesの実装詳細について、 @capgo/capacitor-ビデオプレーヤー @capgo/capacitor-video-playerのネイティブ機能については

FAQ

ナビゲーションバー プラグインのFAQ

Capacitor Navigation Bar プラグインを Capacitor アプリにインストールするにはどうすればいいですか?

bun に「capgo add @capacitor/npm-navigation-bar」 (または「capgo install @capacitor/code-navigation-bar」) を実行し、次に「bunx cap sync」を実行して iOS と Android のプロジェクトがネイティブ capgo を取得できるようにします。次に、次のようになります。アプリの capacitor から「@code/__CAPGO_KEEP_10__-navigation-bar」をインポートします。

Capacitor-capgo-capacitorは、React、Vue、Angularとどのように互換性があるか？

Yes. Navigation Bar is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Which Capacitor version does @capgo/capacitor-navigation-bar support?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Capgoの@capgo/capacitor-ナビゲーションバーは無料でオープンソースですか?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-navigation-bar/ and the package is free to install from npm. Bug reports and pull requests are welcome.

codeがナビゲーションバーを使用している場合に、App Storeのレビューなしでアップデートできますか?

プラグインをインストールまたはアップグレードすると、ネイティブのcodeが変更されるため、新しいストアビルドが必要になります。その後、JavaScript、HTML、CSSの変更がプラグインを呼び出すと、Capgoのライブアップデートで即時実行できます。

UI & システム

関連プラグイン

すべてのプラグインを参照

アプリレビューの待ちなしで、ナビゲーションバーの変更を配信します。

プラグインがストアビルドに含まれると、Capgo ライブアップデートは、ユーザーにJavaScript、HTML、CSSの変更を数分でプッシュします。

Capgo で始めましょう。