メインコンテンツへスキップ
@capgo/capacitor-navigation-bar 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

ガイド

Capacitor で Navigation Bar を使う方法

実機でテストする

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

Navigation Bar プラグインのプレビューQR code

@capgo/capacitor-navigation-bar の使用方法

Capacitor Navigation Bar プラグインは、Android のナビゲーションバーをカスタマイズします。

インストール

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);

リファレンス全文

@capgo/capacitor-navigation-bar の使用方法から続ける

使用している場合 @capgo/capacitor-navigation-bar の使用方法 ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-navigation-bar @capgo/capacitor-navigation-bar の実装の詳細については、 スタートガイド スタートガイドの実装詳細については、 @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 「@capgo/capacitor-video-player. の使い方」のネイティブ機能については

よくある質問

Navigation Bar プラグイン FAQ

Capacitor アプリに Navigation Bar プラグインをインストールするには?

"bun add @capgo/capacitor-navigation-bar"(または "npm install @capgo/capacitor-navigation-bar")を実行し、次に "bunx cap sync" を実行して、iOS と Android プロジェクトがネイティブ code を認識するようにします。アプリの code から "@capgo/capacitor-navigation-bar" をインポートしてください。

@capgo/capacitor-navigation-bar は React、Vue、Angular で動作しますか?

はい。Navigation Bar は Capacitor パッケージであるため、Ionic、React、Vue、Angular、Svelte、プレーン JavaScript を含む、Capacitor 内で動作するすべての Web フレームワークで利用できます。

@capgo/capacitor-navigation-bar はどの Capacitor バージョンをサポートしていますか?

Capgo プラグインは Capacitor のメジャーバージョンに合わせています。使用している Capacitor のメジャーバージョンに一致するプラグインのメジャーバージョンを使ってください (例: Capacitor 8 ならプラグイン v8)。GitHub の README にある互換性テーブルに、メンテナンス中のバージョンが記載されています。

@capgo/capacitor-navigation-barは無料かつオープンソースですか?

はい。codeのソースコードはGitHubの https://github.com/Cap-go/capacitor-navigation-bar/ で公開されており、npmから無料でインストールできます。バグ報告やプルリクエストも歓迎します。

Navigation Barを使用しているcodeを、App Storeの審査なしでアップデートできますか?

プラグインのインストールやアップグレードはネイティブの code を変更するため、新しいストアビルドが必要です。その後は、プラグインを呼び出す JavaScript、HTML、CSS の変更を Capgo Live Updates で即座に配信できます。

アプリのレビューを待たずに Navigation Bar の変更をリリース

プラグインをストア用ビルドに組み込めば、Capgo live updates で JavaScript、HTML、CSS の変更を数分でユーザーに配信できます

Capgo から始める