@capgo/capacitor-native-loader

iOS 및 Android 네이티브 뷰를 사용하여 WebView 위, 아래, 주변, 또는 대신 렌더링하는 정교한 로더를 렌더링하세요.

네이티브 렌더링 경로

UIKIT 및 Android overlay 뷰를 사용하여 WebView가 비싼 투명한 효과를 애니메이션하는 대신 로더를 표시하세요.

flexible placement

로더를 화면 전체, 중앙, Edge에 고정, Chrome-style 위, 또는 WebView 주변에 safe-area-aware insets를 사용하여 표시하세요.

내장 및 자산 로더

네이티브 Siri-style, Siri v2 Edge, Chrome top progress, orbit, ring, pulse, dots, bars, wave, halo, image, 또는 Lottie-based 로더를 사용하세요.

호출 가능 위치

JavaScript, Swift, Kotlin, 또는 다른 네이티브 플러그인에서 JavaScript를 통해 네이티브 API를 호출하세요.

When To Use It

@capgo/capacitor-native-loader WebView가 바쁘거나, 크기를 조절중이거나, 네이티브 표면 뒤에 숨겨져 있을 때, 부드럽고 투명하며 네이티브한 로딩 상태를 유지하기 위해 사용됩니다.

사용할 때:

웹 콘텐츠 위에 투명한 풀 스크린 로딩 레이어
Chrome-style 상단 진행바를 사용하여 WebView 크기를 조절할 수 있습니다.
앱의 상단, 하단, 왼쪽, 오른쪽에 로더를 표시
네이티브 콘텐츠가 화면의 일부를 차지하는 경우 WebView 크기를 조절한 상태에서 로더를 표시
네이티브 콘텐츠가 화면의 일부를 차지하는 경우 WebView 크기를 조절한 상태에서 로더를 표시
네이티브 로더가 네이티브 콘텐츠가 화면의 일부를 차지하는 경우 WebView 크기를 조절한 상태에서 로더를 표시
네이티브 플러그인에 의해 트리거된 JavaScript가 준비되지 않은 상태에서 공유 로더

Demo Styles

Style	미리보기
Siri
Siri v2
크롬 탑
링
점
바
웨이브
오비트
Pulse
Halo
Around
Lottie
이미지

코어 API

show(options) __CAPGO_KEEP_0__을 표시하고 반환합니다. id.
update(options) 기존 로더를 변경하여 overlay를 제거하지 않습니다.
setProgress(options) 진행 상황을 업데이트합니다.
hide(options) 하나의 로더를 제거합니다.
hideAll(options) 모든 로더를 제거합니다.
setWebViewLayout(options) 웹뷰/바디 크기를 조절하거나 내부 여백을 조절하여 native 로더가 옆에 나타날 수 있도록 합니다.
resetWebViewLayout(options?) 원래 웹뷰/바디 레이아웃을 복원합니다.
getState() 현재 표시 중인 로더 id를 반환합니다.
configure(options) 기본 스타일, 위치, 색상, 동작, 및 동작을 설정합니다.

위치 모델

placement native 표면이 나타날 위치를 제어합니다.

fullscreen __CAPGO_KEEP_0__의 모든 앱을 커버할 수 있으며, 선택적으로 투명합니다.
center __CAPGO_KEEP_1__ 위에 작은 로더를 떠다니게 합니다.
top, bottom, left, and right pin loaders to a safe-area-aware edge.
chrome 안전 영역에 대한 edge 에 로더를 고정합니다. webView.mode: 'resize'.
around __CAPGO_KEEP_2__에서 사용하는 스타일은 전체 너비의 네이티브 탑 바를 사용하고 __CAPGO_KEEP_3__과 잘 어울립니다.
custom __CAPGO_KEEP_4__에서 로더의 움직임을 화면 프레임 주변에 렌더링합니다.

__CAPGO_KEEP_5__에서 네이티브 플러그인 또는 분할 뷰 워크플로우에 사용할 때 명시적인 프레임을 사용합니다. interactionMode: 'passThrough' Use block __CAPGO_KEEP_6__에서 사용자들이 __CAPGO_KEEP_7__과 상호 작용할 수 있는 경우. loaderOnly __CAPGO_KEEP_8__에서 로딩이 탭을 방지해야 할 때, 또는

Keep going from @capgo/capacitor-native-loader

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__를 사용하는 경우 capgo/capacitor-native-loader __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고, 그것을 Getting Started __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader 구현 세부 사항을 확인하기 위해, capgo/capacitor-native-navigation __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native chrome 및 WebView 레이아웃을 위해, capgo/capacitor-transitions 웹 루트 동작을위한, 그리고 capgo/capacitor-native-loader __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader 튜토리얼을 사용합니다.