@capgo/capacitor-native-loader

네이티브 렌더링 경로

뷰웍뷰가 비싼 투명 효과를 애니메이션 하도록 요청하는 대신 UIKit와 Android overlay 뷰로 로더를 보여주세요.

가변적인 위치

로더를 풀 스크린, 센터, 에지에 고정, 크롬 스타일로 위쪽, 또는 안전 영역에 인셋이 적용된 WebView 주변에 배치하세요.

내장 로더와 자산 로더

자연스러운 Siri 스타일, Siri v2 에지, Chrome 상단 진행, 원형, 링, 펄스, 점, 막대, 파도, 호, 이미지 또는 Lottie 기반 로더를 사용하세요.

모든 곳에서 호출할 수 있습니다.

API을 통해 자바스크립트, 스위프트, 코틀린 또는 다른 네이티브 플러그인으로부터 로더를 트리거하세요.

사용할 때

@capgo/capacitor-native-loader 다음 상황에서 사용하세요:

웹 콘텐츠 위에 투명한 전체 화면 로딩 레이어

• 웹뷰 크기를 조절하는 대신 콘텐츠를 가리지 않는 Chrome 스타일 상단 진행 막대
• 앱의 상단, 하단, 왼쪽, 오른쪽에 위치한 에지 로더
• 네이티브 콘텐츠가 화면의 일부를 차지하는 동안 리사이즈된 웹뷰 주변의 로더
• 네이티브 fallback 로더가 심각한 웹 렌더링, 경로 변경 또는 시작 작업과 같은 상황에서 살아남습니다.
• native fallback loaders that survive heavy web rendering, route changes, or startup work
• 다른 네이티브 플러그인이 자바스크립트가 준비되기 전에 공유 로더를 트리거합니다.
• Lottie, 이미지 또는 리모트 애셋으로 백업된 로딩 애니메이션

주의

웹 전용 루트 애니메이션을 사용하려면 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions를 사용하세요. @capgo/capacitor-transitions데모 스타일

제목 ‘데모 스타일’

미리보기	Siri
Native Loader
Siri v2
Chrome 상단
Ring
점
바
Wave
Orbit
Pulse
Halo
Around
Lottie
이미지

API

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

배치 모델

placement 자연 bề면이 나타나는 위치를 제어합니다:

• fullscreen 전체 앱을 덮고 optionally 투명합니다.
• center 웹뷰 위에 작은 로더를 떠올립니다.
• top, bottom, left, 그리고 right 안전 영역에 대한 경계에 로더를 고정합니다.
• chrome 자연적인 상단 바를 사용하여 전체 너비를 사용하고 webView.mode: 'resize'.
• around 화면 프레임 주변에 로더 동작을 렌더링합니다.
• custom 자연 플러그인 또는 분할 뷰 워크플로우에서 명시적인 프레임을 사용합니다.

사용 interactionMode: 'passThrough' 사용자가 웹뷰와 상호 작용할 수 있는 경우 block __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader loaderOnly 터치 입력을 방지할 때, 또는

capgo/capacitor-native-loader로 계속 진행하세요.

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 사용하는 경우 capgo/capacitor-native-loader __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고, Getting Started implementation 세부 정보를 위해 capgo/capacitor-native-navigation 네이티브 크롬 및 WebView 레이아웃을 위해 capgo/capacitor-transitions 웹 경로 동작, 그리고 Capacitor @capgo/capacitor-native-loader를 사용하여 튜토리얼을 위해