메인 콘텐츠로 바로가기
Capgo - Capacitor 앱의 실시간 업데이트 Capgo

@capgo/capacitor-native-navigation

iOS와 Android의 네비게이션 창을 자바스크립트가 소유한 상태에서 네이티브로 렌더링합니다.
시작하기 GitHub

네이티브 크롬

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

웹 소유 루트

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

직렬화 아이콘

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

네이티브 전환 셸

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

Zoom 루트

카드, 그리드 및 미디어 상세 루트를 공유된 요소 스타일 네이티브 줌 지오메트리와 함께 열어줍니다.

데모

제목 ‘데모’
네이티브 셸탭 플로우
네이티브 네비게이션 셸 애니메이션 데모를 보여줍니다. 네이티브 네비게이션 바, 탭, WebView 콘텐츠네이티브 네비게이션 탭 플로우 애니메이션을 보여줍니다. 탭 선택, 푸시 전환, 네이티브 백

Core API

Section titled “Core API”
  • configure(options?) __CAPGO_KEEP_0__
  • setNavbar(options) native 제목, 부제목, 뒤로 가기 버튼, 버튼, 색상, 투명도, 및 가시성 업데이트합니다.
  • setTabbar(options) 탭, 선택된 탭, 배지, 레이블, 아이콘, 색상, 및 가시성을 업데이트합니다.
  • beginTransition(options?) JavaScript 경로 변경 전에 나가는 WebView를 캡처합니다.
  • finishTransition(options?) route 내용이 준비되면 캡처한 스냅샷에서 live WebView로 애니메이션합니다.
  • beginZoomTransition(target, options?) 요소 또는 사각형에서 zoom 전환을 위한 JavaScript 도우미입니다. finishZoomTransition(target?, options?) native implementation 버전 마커를 반환합니다.
  • getPluginVersion() 이벤트

native 뒤로 가기 제공물이 탭되었을 때 발생하는 이벤트

native navbar 액션 버튼이 탭되었을 때 발생하는 이벤트
  • navbarBack native 탭이 선택되었을 때 발생하는 이벤트
  • navbarItemTap and
  • tabSelect are
  • safeAreaChanged 자연스러운 바 및 안전 영역 인셋 변경을 보고합니다.
  • transitionStart 자연스러운 전환 경계를 보고합니다. transitionEnd 플랫폼 모델

플랫폼 모델

iOS는

iOS 26 이상에서는 시스템이 Liquid Glass 동작을 렌더링하도록 허용합니다. 이전 버전에서는 자연스러운 투명/물질 fallback을 사용합니다. UINavigationBar Android는 AppCompat 툴바와 Material 하단 탐색栏을 사용하여 에지 투 에지 배치합니다. UITabBar이 플러그인은 버전 1에서 하나의 __CAPGO_KEEP_0__ WebView를 유지하여 브리지 안정성을 유지하고 원본이 프레임, 바 시각, 탭 선택 창, 안전 영역 보고, 전환 셸만 소유합니다.

Keep going from @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation

Keep going from @Capacitor/__CAPGO_KEEP_1__-native-navigation

Keep going from @capgo/capacitor-native-navigation

Section titled “Keep going from @capgo/capacitor-native-navigation”

If you are using __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ for native navigation, you can plan native media and interface behavior, and connect it with __CAPGO_KEEP_0__/__CAPGO_KEEP_1__. @capgo/capacitor-native-navigation __CAPGO_KEEP_0__/__CAPGO_KEEP_1__를 사용하여 네이티브 네비게이션을 연결하면 네이티브 미디어 및 인터페이스 동작을 계획할 수 있습니다. capgo/capacitor를 사용하여 네이티브 네비게이션을 연결합니다. capgo/capacitor를 사용하여 네이티브 네비게이션을 연결하여 네이티브 기능을 capgo/capacitor에서 사용합니다. capgo/capacitor를 사용하여 네이티브 라이브 활동을 연결합니다. capgo/capacitor를 사용하여 네이티브 라이브 활동을 연결하여 네이티브 기능을 capgo/capacitor에서 사용합니다. capgo/capacitor-live-activities capgo/capacitor-live-activities의 구현 세부 사항을 위해 capgo/capacitor-live-activities를 사용합니다. capgo/capacitor를 사용하여 네이티브 비디오 플레이어를 연결하여 네이티브 기능을 capgo/capacitor-video-player에서 사용합니다. capgo/capacitor-video-player capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player.