@capgo/capacitor-native-navigation

iOS와 Android의 네비게이션 크롬을 자바스크립트가 소유한 경로, 콘텐츠, 아이콘, 레이블 및 바 상태와 함께 네이티브로 렌더링합니다.

시작하기 GitHub

네이티브 크롬

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

웹 소유 경로

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

직렬화 아이콘

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

자연스러운 전환 shell

현재 WebView를 캡처하고 JavaScript에서 내용을 업데이트한 다음 자연스러운 WebView로 스냅샷 애니메이션으로 마무리합니다.

지도 확대

카드, 그리드, 미디어 상세 화면을 열 때 공유된 요소 스타일의 자연스러운 확대 기하학을 사용합니다.

데모

자연스러운 shell	터치 흐름

API

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

자연적인 뒤로 가기 제공을 탭했을 때 발생합니다.

navbarBack __CAPGO_KEEP_0__
navbarItemTap __CAPGO_KEEP_0__ native navbar 액션 버튼이 클릭될 때 발생합니다.
tabSelect __CAPGO_KEEP_0__ native 탭이 선택될 때 발생합니다.
safeAreaChanged __CAPGO_KEEP_0__ native 바 및 safe-area inset 변경을 보고합니다.
transitionStart 그리고 transitionEnd __CAPGO_KEEP_0__ native 전환 경계를 보고합니다.

플랫폼 모델

iOS는 UINavigationBar 그리고 UITabBariOS 26 이상에서 시스템이 Liquid Glass 동작을 렌더링하도록 허용합니다. 이전 버전은 native translucent/material fallbacks를 사용합니다.

Android는 AppCompat toolbar와 Material bottom navigation을 edge-to-edge placement으로 사용합니다.

버전 1은 단일 Capacitor WebView를 유지하여 브리지 안정성을 유지하고 native가 프레임, 바 시각, 탭 선택 창, safe-area 보고, 전환 셸을 소유합니다.

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation을 사용하고 있다면 capgo/capacitor-native-navigation __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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의 @capgo/capacitor-video-player 기능을 사용하여 원시적인 기능을 사용하고, @capgo/capacitor-video-player Capgo의 @capgo/capacitor-video-player 기능의 구현 세부 사항을 사용하여,