가이드
Capacitor에서 Navigation Bar 사용법
@capgo/capacitor-navigation-bar 사용하기
Android navigation bar를 커스텀하기 위한 Capacitor Navigation Bar Plugin입니다.
설치
bun add @capgo/capacitor-navigation-bar
bunx cap sync
플러그인이 제공하는 기능
setNavigationBarColor- navigation bar 색상 및 버튼 테마 설정getNavigationBarColor- 현재 navigation bar 색상 및 버튼 테마 가져오기
사용 예시
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);
전체 레퍼런스
- GitHub: https://github.com/Cap-go/capacitor-navigation-bar/
- 문서: /docs/plugins/navigation-bar/
@capgo/capacitor-navigation-bar 사용하기부터 이어서 진행
사용 중이라면 @capgo/capacitor-navigation-bar 사용하기 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-navigation-bar @capgo/capacitor-navigation-bar의 구현 세부 사항은 시작하기 Getting Started의 구현 상세 내용은 @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용에서의 네이티브 기능, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항은, 그리고 @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player. 사용하기에서의 네이티브 기능은