메인 콘텐츠로 건너뛰기
@capgo/capacitor-네비게이션 바 UI & 시스템 오픈 소스

네비게이션 바 Capacitor 플러그인

모바일 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의 네비게이션 바를 사용하는 방법

장치에서 테스트

Capgo 앱을 다운로드한 후 QR code를 스캔하세요.

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

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

Capacitor 네비게이션 바 플러그인 (Android 네비게이션 바를 커스터마이즈하는 데 사용됩니다.)

설치

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

이 플러그인이 제공하는 것

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

예시 사용

setNavigationBarColor

Navigation Bar 색상과 버튼 테마를 설정하세요.

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

현재 Navigation Bar 색상과 버튼 테마를 가져오세요.

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_KEEP_0__/__CAPGO_KEEP_1__-navigation-bar와 연결하세요. @capgo/capacitor-navigation-bar의 구현 세부 사항을 참조하세요. @capgo/capacitor-navigation-bar를 사용하세요. 시작하기 시작하기 구현 세부 사항에 대한 구현 세부 사항 @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용하는 원시 기능 @capgo/capacitor-실시간 활동 @capgo/capacitor-live-activities 사용하는 구현 세부 사항 및 @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player 사용하는 원시 기능

FAQ

Navigation Bar 플러그인 FAQ

Navigation Bar 플러그인을 Capacitor 앱에 설치하는 방법은?

Run "bun add @capgo/capacitor-navigation-bar" (or "npm install @capgo/capacitor-navigation-bar"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-navigation-bar" in your app code.

React, Vue 및 Angular과 함께 @capgo/capacitor-navigation-bar가 작동하는가요?

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.

Capacitor-capacitor의 Capacitor 버전은 @capgo/capacitor-navigation-bar에서 지원하는가요?

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/capacitor-navigation-bar은 무료이며 오픈 소스인가요?

네. code의 소스는 GitHub에 https://github.com/Cap-go/capacitor-navigation-bar/ 에 공개되어 있으며 npm에서 무료로 설치할 수 있습니다. 버그 리포트와 풀 리퀘스트는 환영합니다.

code가 Navigation Bar를 사용하는 경우 App Store 리뷰 없이 업데이트가 가능한가요?

code를 업데이트하면 Native code이 변경되므로 새로운 스토어 빌드가 필요합니다. 그 후에 JavaScript, HTML 및 CSS 변경 사항이 플러그인을 호출하는 경우 Capgo 라이브 업데이트와 함께 즉시 배포할 수 있습니다.

앱 리뷰 기다리지 않고 네비게이션 바 변경을 배포하세요.

플러그인이 스토어 빌드에 포함된 후, Capgo 라이브 업데이트는 사용자에게 몇 분 내에 자바스크립트, HTML 및 CSS 변경을 푸시합니다.

Capgo로 시작하세요.