본문 바로가기
Capgo - Capacitor 앱 빌드, 배포 및 업데이트 Capgo

@capgo/capacitor-native-navigation

iOS와 Android의 네이티브 네비게이션 크롬을 렌더링하면서, 라우트, 콘텐츠, 아이콘, 레이블, 바 상태는 JavaScript가 계속 관리합니다.
시작하기 GitHub

네이티브 크롬

웹 컴포넌트 대신 플랫폼 UI를 사용하여 상단 네비게이션 바와 하단 탭 바를 그립니다.

Web 소유 라우트

Native에서 사용자 의도 이벤트를 발생시키면, 기존 라우터가 WebView 콘텐츠를 변경합니다.

직렬화된 아이콘

SVG, SF Symbol, 번들 이미지 또는 Android drawable 기술자를 사용하여 탭과 버튼을 구성합니다.

Native 트랜지션 셸

현재 WebView를 캡처하고 JavaScript로 콘텐츠를 업데이트한 뒤, native snapshot-to-WebView 애니메이션으로 마무리합니다.

Zoom 라우트

공유 요소 스타일의 native zoom geometry를 사용하여 카드, 그리드, 미디어 상세 라우트를 엽니다.

데모

“데모” 섹션
네이티브 셸탭 흐름멀티 레벨 navbar (iOS)멀티 레벨 네비게이션 바 (Android)
native navbar, 탭, WebView 콘텐츠를 보여주는 애니메이션 native navigation 셸 데모탭 선택, 푸시 전환, 네이티브 뒤로 가기를 보여주는 애니메이션 네이티브 네비게이션 탭 흐름iOS 멀티 레벨 네비게이션 바 세그먼트 행 녹화: 섹션 칩 행 위의 계정/조직 전환기Android 멀티 레벨 네비게이션 바 세그먼트 행 녹화: 섹션 칩 행 위의 계정/조직 전환기

핵심 API

“Core API” 섹션
  • configure(options?) 네이티브 크롬 호스트를 활성화하고 콘텐츠 인셋을 제어합니다.
  • setNavbar(options) 네이티브 타이틀, 서브타이틀, 뒤로 가기 버튼, 버튼, 색상, 투명도, 가시성 및 바 하단의 멀티 레벨 세그먼트 행을 업데이트합니다.segments).
  • setTabbar(options) 탭, 선택된 탭, 배지, 라벨, 아이콘, 색상 및 가시성을 업데이트합니다.
  • beginTransition(options?) JavaScript 라우트 변경 전의 이전 WebView를 캡처합니다.
  • finishTransition(options?) 라우트 콘텐츠가 준비되면 캡처된 스냅샷에서 라이브 WebView로 애니메이션 효과를 적용합니다.
  • beginZoomTransition(target, options?) 및 finishZoomTransition(target?, options?) 요소나 사각형으로부터의 줌 전환을 위한 JavaScript 헬퍼입니다.
  • getPluginVersion() 네이티브 구현 버전 마커를 반환합니다.

이벤트

“Events” 섹션
  • navbarBack 네이티브 뒤로 가기 버튼을 탭했을 때 발생합니다.
  • navbarItemTap 네이티브 navbar 액션 버튼을 탭했을 때 발생합니다.
  • navbarSegmentSelect navbar segment row의 아이템을 선택했을 때 발생합니다.
  • tabSelect 네이티브 탭을 선택했을 때 발생합니다.
  • safeAreaChanged 네이티브 바 및 safe-area inset 변경 사항을 보고합니다.
  • transitionStart 및 transitionEnd 네이티브 전환 경계(transition boundaries)를 보고합니다.

플랫폼 모델

“플랫폼 모델” 섹션

iOS는 다음을 사용합니다: UINavigationBar 및 UITabBariOS 26 이상 버전에서는 시스템이 Liquid Glass 효과를 렌더링하며, 이전 버전은 네이티브 translucent/material 폴백을 사용합니다.

Android는 AppCompat toolbar와 edge-to-edge 배치가 적용된 Material bottom navigation을 사용합니다.

이 플러그인은 라우트마다 네이티브 WebView를 생성하지 않습니다. 버전 1은 브릿지 안정성을 위해 단일 Capacitor WebView를 유지하며, 네이티브는 프레임, 바 비주얼, 탭 선택 크롬, safe-area 보고 및 트랜지션 셸만 담당합니다.

@capgo/capacitor-native-navigation에서 계속하기

“@capgo/capacitor-native-navigation에서 계속하기” 섹션

사용 중이라면 @capgo/capacitor-native-navigation 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-native-navigation 사용하기 @capgo/capacitor-native-navigation 사용 시 네이티브 기능을 위해서는, @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용에서의 네이티브 기능, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항, @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player 사용에서의 네이티브 기능 및 @capgo/capacitor-video-player @capgo/capacitor-video-player.의 구현 세부 사항