메인 콘텐츠로 바로가기

@capgo/capacitor-native-navigation

iOS 및 Android 네비게이션 창을 자바스크립트가 경유하는 경로, 콘텐츠, 아이콘, 레이블 및 바 상태를 포함하여 네이티브로 렌더링합니다.

네이티브 창

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

웹 소유 경로

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

직렬화 아이콘

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

네이티브 전환 셸

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

경로 확대

카드, 그리드, 미디어 디테일 루트를 공유된 요소 스타일의 원생 조형학으로 열기.

데모

데모
원생 셸터치 흐름
원생 네비게이션 셸 애니메이션 데모원생 네비게이션 터치 흐름 애니메이션
  • configure(options?) 원생 제목, 서브 타이틀, 뒤로 가기 버튼, 버튼, 색상, 투명도 및 가시성을 업데이트합니다.
  • setNavbar(options) 탭, 선택된 탭, 배지, 레이블, 아이콘, 색상 및 가시성을 업데이트합니다.
  • setTabbar(options) Core __CAPGO_KEEP_0__
  • beginTransition(options?) 웹뷰 전송을 JavaScript 경로 변경 전에 캡처합니다.
  • finishTransition(options?) 경로 콘텐츠가 준비되면 캡처된 스냅샷에서 라이브 웹뷰로 애니메이션합니다.
  • beginZoomTransition(target, options?) 그리고 finishZoomTransition(target?, options?) 요소 또는 사각형에서 자바스크립트 헬퍼를 위한 자바스크립트 zoom 전환입니다.
  • getPluginVersion() 자연스러운 implementation 버전 마커를 반환합니다.
  • navbarBack 자연스러운 뒤로가기 제공물이 탭되었을 때 발생합니다.
  • navbarItemTap 자연스러운 네비게이션 바 액션 버튼이 탭되었을 때 발생합니다.
  • tabSelect 자연스러운 탭이 선택되었을 때 발생합니다.
  • safeAreaChanged 자연스러운 바 및 안전 영역 인셋 변경을 보고합니다.
  • transitionStart 그리고 transitionEnd 자연스러운 전환 경계를 보고합니다.

플랫폼 모델

플랫폼 모델

iOS는 UINavigationBarUITabBar. iOS 26 이상 버전에서는 시스템이 Liquid Glass 동작을 렌더링하도록 허용하고; 이전 버전은 원시 투명/물리적 fallback을 사용합니다.

Android는 AppCompat 툴바와 Material 하단 네비게이션과 edge-to-edge 배치와 함께 사용합니다.

플러그인은 하나의 원시 WebView를 각 경로에 생성하지 않습니다. 버전 1은 단일 Capacitor WebView를 유지하고 원시가 프레임, 바 시각, 탭 선택 창, 안전 영역 보고, 전환 셸을 소유하도록 합니다.

계속 @capgo/capacitor-native-navigation에서

계속 @capgo/capacitor-native-navigation에서

이 플러그인은 @capgo/capacitor-native-navigation To native 미디어 및 인터페이스 동작을 계획하고 연결하세요. Using @capgo/capacitor-native-navigation native 기능을 사용하기 위해 Using @capgo/capacitor-native-navigation Using @capgo/capacitor-live-activities native 기능을 사용하기 위해 Using @capgo/capacitor-live-activities @capgo/capacitor-live-activities @capgo/capacitor-live-activities Using @capgo/capacitor-video-player native 기능을 사용하기 위해 Using @capgo/capacitor-video-player @capgo/capacitor-video-player @capgo/capacitor-video-player