메인 콘텐츠로 건너뛰기
플러그인으로 돌아가기
@capgo/capacitor-네비게이션바
튜토리얼
@capgo/capacitor-네비게이션바

네비게이션바

Android 네비게이션바 색상과 가시성을 커스터마이즈하여 몰입형 UI 경험을 제공합니다.

Capacitor Navigation Bar

장치에서 테스트

Capacitor 앱을 다운로드하고 QR코드를 스캔하세요.

Download the Capgo app, then scan the QR code.

네비게이션 바 플러그인 미리보기 QR code

@capgo/capacitor-네비게이션 바 사용

Capacitor 네비게이션 바 플러그인: 안드로이드 네비게이션 바를 커스터마이즈하세요.

설치

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

이 플러그인이 제공하는 기능

  • setNavigationBarColor - 네비게이션 바 색상과 버튼 테마를 설정합니다.
  • getNavigationBarColor - 현재 네비게이션 바 색상과 버튼 테마를 가져옵니다.

예시 사용

setNavigationBarColor

네비게이션 바 색상과 버튼 테마를 설정합니다.

import { NavigationBar } 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

이 기능을 사용 중이라면 Using @capgo/capacitor-navigation-bar @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigation-bar @capgo/capacitor-navigation-bar @capgo/capacitor-navigation-bar 을 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigation-bar Capacitor Navigation Bar Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.