내용으로 건너뛰기
Capgo - Capacitor 앱에 대한 실시간 업데이트 Capgo

@capgo/capacitor-native-네비게이션

JavaScript가 경로, 콘텐츠, 아이콘, 레이블 및 바 상태를 소유하는 동안 iOS 및 Android 네비게이션 창을 자바스크립트로 렌더링합니다.
시작하기 GitHub

네이티브 크롬

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

웹 소유 경로

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

직렬화 아이콘

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

네이티브 전환 셸

현재 WebView를 캡처하고, 자바스크립트에서 콘텐츠를 업데이트한 후 네이티브 스냅샷-WebView 애니메이션으로 마무리합니다.

줌 경로

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

데모

데모 섹션
자연스러운 셸터치 흐름
자연스러운 네비게이션 셸 애니메이션 데모자연스러운 네비게이션 터치 흐름 애니메이션

Core API

Section titled “Core API”
  • configure(options?) 자연스러운 제목, 서브 타이틀, 뒤로 가기 버튼, 버튼, 색상, 투명도 및 가시성을 업데이트합니다.
  • setNavbar(options) 탭, 선택된 탭, 배지, 레이블, 아이콘, 색상 및 가시성을 업데이트합니다.
  • setTabbar(options) JavaScript 경로 변경 전에 WebView를 캡처합니다.
  • beginTransition(options?) __CAPGO_KEEP_0__
  • finishTransition(options?) __CAPGO_KEEP_0__
  • beginZoomTransition(target, options?) 그리고 finishZoomTransition(target?, options?) __CAPGO_KEEP_1__
  • getPluginVersion() __CAPGO_KEEP_2__

이벤트

__CAPGO_KEEP_3__
  • navbarBack __CAPGO_KEEP_4__
  • navbarItemTap __CAPGO_KEEP_5__
  • tabSelect __CAPGO_KEEP_6__
  • safeAreaChanged __CAPGO_KEEP_7__
  • transitionStart 그리고 transitionEnd __CAPGO_KEEP_8__

플랫폼 모델

플랫폼 모델 섹션

iOS는 UINavigationBar 그리고 UITabBariOS 26 이상 버전부터는 Liquid Glass 동작을 시스템이 렌더링하도록 허용하고, 이전 버전에서는 네이티브 투명/물리적 fallback을 사용합니다.

Android는 AppCompat 툴바와 Material bottom navigation을 사용하여 edge-to-edge 배치합니다.

The plugin does not create one native WebView per route. Version 1 keeps a single Capacitor WebView for bridge stability and lets native own only the frame, bar visuals, tab selection chrome, safe-area reporting, and transition shell.

다음으로 @capgo/capacitor-native-navigation

capgo/capacitor-native-navigation

이 플러그인을 사용하는 경우 @capgo/capacitor-native-네비게이션 native 미디어 및 인터페이스 동작을 계획하고 연결하세요 @capgo/capacitor-자연스러운 네비게이션 native 네이티브 기능을 위한 @capgo/capacitor-native-navigation @capgo/capacitor-실시간 활동 native 네이티브 기능을 위한 @capgo/capacitor-live-활동 @capgo/capacitor-실시간 활동 @capgo/capacitor-실시간 활동 @capgo/capacitor-video-player native-capgo capability을 위해 @capgo/capacitor-video-player를 사용합니다. @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player.