@capgo/capacitor-native-navigation

JavaScript가 경로, 콘텐츠, 아이콘, 레이블 및 바 상태를 소유하는 동안 iOS 및 Android 네비게이션 크롬을 원시적으로 렌더링합니다.

시작하기 GitHub

네이티브 크롬

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

웹 소유 경로

네이티브는 사용자 의도 이벤트를 발생시킨 후, 기존 라우터가 WebView 콘텐츠를 변경합니다.

직렬화 아이콘

SVG, SF Symbol, 패키지 이미지, 또는 Android drawable descriptor를 사용하여 탭과 버튼을 구성합니다.

네이티브 전환 셸

현재 WebView를 캡처하고 JavaScript에서 내용을 업데이트한 다음 네이티브 스냅샷-WebView 애니메이션으로 끝낼 수 있습니다.

Zoom 루트

카드, 그리드 및 미디어 상세 루트를 공유된 요소 스타일 네이티브 줌 기하학으로 열 수 있습니다.

데모

네이티브 셸	탭 흐름

Core API

configure(options?) 네이티브 크롬 호스트를 활성화하고 콘텐츠 인셋을 제어합니다.
setNavbar(options) 자연스러운 제목, 부제목, 뒤로가기 버튼, 버튼, 색상, 투명도, 및 가시성을 업데이트합니다.
setTabbar(options) 탭, 선택된 탭, 배지, 레이블, 아이콘, 색상, 및 가시성을 업데이트합니다.
beginTransition(options?) JavaScript 경로 변경 전에 나가는 WebView를 캡처합니다.
finishTransition(options?) 경로 내용이 준비되면 캡처한 스냅샷에서 라이브 WebView로 애니메이션합니다.
beginZoomTransition(target, options?) 요소 또는 사각형에서 줌 전환을 위한 JavaScript 도우미입니다. finishZoomTransition(target?, options?) 자연스러운 implementation 버전 마커를 반환합니다.
getPluginVersion() 이벤트

‘이벤트’라는 제목의 섹션

navbarBack 자연스러운 네비게이션 바 액션 버튼이 탭되었을 때 발생합니다.
navbarItemTap 자연스러운 탭이 선택되었을 때 발생합니다.
tabSelect and
safeAreaChanged __CAPGO_KEEP_0__ native 바(bar) 및 safe-area inset 변경을 보고합니다.
transitionStart __CAPGO_KEEP_0__와 함께 transitionEnd __CAPGO_KEEP_0__ native 전환 경계를 보고합니다.

플랫폼 모델

iOS는 UINavigationBar __CAPGO_KEEP_0__와 함께 . iOS 26 이상 버전에서는 시스템이 Liquid Glass 동작을 렌더링하도록 허용합니다. 이전 버전은 native translucent/material fallbacks를 사용합니다. UITabBarAndroid는 AppCompat 툴바와 Material bottom navigation을 사용하여 edge-to-edge 배치합니다.

플러그인은 하나의 native WebView를 각 경로에 생성하지 않습니다. 버전 1은 bridge 안정성을 위해 단일 __CAPGO_KEEP_0__ WebView를 유지하고 native가 프레임, 바 시각, 탭 선택 창, safe-area 보고 및 전환 셸만 소유합니다.

@Capacitor/__CAPGO_KEEP_1__-native-navigation

If you are using __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ for native navigation, connect it with __CAPGO_KEEP_0__/__CAPGO_KEEP_1__. @capgo/capacitor-native-navigation __CAPGO_KEEP_0__/__CAPGO_KEEP_1__를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고, __CAPGO_KEEP_0__/__CAPGO_KEEP_1__와 연결하세요. capgo/capacitor를 사용하여 네이티브 capgo/capacitor를 사용하여 capgo/capacitor capgo/capacitor를 사용하여 네이티브 capgo/capacitor를 사용하여 capgo/capacitor capgo/capacitor capgo/capacitor의 구현 세부 사항을 capgo/capacitor capgo/capacitor를 사용하여 네이티브 capgo/capacitor를 사용하여 capgo/capacitor capgo/capacitor capgo/capacitor를 사용하여 네이티브 capgo/capacitor를 사용하여 capgo/capacitor capgo/capacitor capgo/capacitor를 사용하여 네이티브 capgo/capacitor를 사용하여 capgo/capacitor for the implementation detail in @capgo/capacitor-video-player.