본문으로 이동
Capgo - Live Updates for Capacitor Apps Capgo

@capgo/capacitor-native-navigation

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

네이티브 크롬

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

웹 소유 루트

네이티브는 사용자 의도 이벤트를 방출하고, 그 후에 웹뷰 콘텐츠를 변경하는 existing 라우터를 변경합니다.

직렬화 아이콘

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

자연스러운 전환 shell

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

확대 경로

카드, 그리드, 미디어 상세 경로를 공유된 요소 스타일 네이티브 확대幾형으로 열 수 있습니다.

데모

데모 섹션
자연스러운 shell터치 흐름
네이티브 네비게이션 셸 애니메이션 데모를 보여줍니다. 네이티브 네비게이션 바, 탭, WebView 콘텐츠터치 흐름 애니메이션 데모를 보여줍니다. 탭 선택, 푸시 전환, 네이티브 백

코어 API

Core API
  • configure(options?) 자연 웹뷰 호스트를 활성화하고 콘텐츠 인셋을 제어합니다.
  • setNavbar(options) 자연 제목, 서브 타이틀, 뒤로가기 버튼, 버튼, 색상, 투명도 및 가시성을 업데이트합니다.
  • setTabbar(options) 탭, 선택된 탭, 배지, 레이블, 아이콘, 색상 및 가시성을 업데이트합니다.
  • beginTransition(options?) JavaScript 경로 변경 전에 outgoing WebView를 캡처합니다.
  • finishTransition(options?) route content가 준비되면 captured snapshot에서 live WebView로 애니메이션을 합니다.
  • beginZoomTransition(target, options?) 그리고 finishZoomTransition(target?, options?) 요소 또는 사각형에서 줌 전환을 위한 자바스크립트 도우미입니다.
  • getPluginVersion() 자연 구현 버전 마커를 반환합니다.

이벤트

자연 뒤로가기 제공을 탭했을 때 발생합니다.
  • navbarBack Section titled “Events”
  • navbarItemTap native navbar 액션 버튼을 탭할 때 발생합니다.
  • tabSelect native 탭이 선택될 때 발생합니다.
  • safeAreaChanged native 바와 safe-area inset 변경을 보고합니다.
  • transitionStart Capgo 마케팅 웹사이트의 페이지/영역: Capgo 마케팅 웹사이트. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. page trust.astro에서 보입니다. Message key `and` (And). transitionEnd native 전환 경계를 보고합니다.

플랫폼 모델

플랫폼 모델 섹션

iOS는 UINavigationBar Capgo 마케팅 웹사이트의 페이지/영역: Capgo 마케팅 웹사이트. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. page trust.astro에서 보입니다. Message key `and` (And). UITabBariOS 26 이상 버전에서는 시스템이 Liquid Glass 동작을 렌더링하도록 허용하고, 이전 버전에서는 native translucent/material fallback을 사용합니다.

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

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

capgo/capacitor-native-navigation

“capgo/capacitor-native-navigation” 제목”

__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-live-activities를 사용하는 경우의 네이티브 기능 capgo/capacitor-live-activities capgo/capacitor-live-activities의 구현 세부 사항 capgo/capacitor-video-player capgo/capacitor-native-navigation으로 계속 진행하세요. capgo/capacitor-native-navigation 제목 자연스러운 네이티브 기능을 위해 @capgo/capacitor-비디오 플레이어를 사용하고, @capgo/capacitor-비디오 플레이어 자연스러운 구현 세부 정보를 위해 @capgo/capacitor-비디오 플레이어를 사용합니다.