내용으로 건너뛰기
Capgo - Capgo Live Update for Capacitor Apps Capgo

@capgo/capacitor-native-loader

iOS 및 Android의 원시 뷰를 사용하여 WebView 위, 아래, 주변 또는 대신 렌더링하는 고급 로더를 렌더링합니다.
시작하기 GitHub

네이티브 렌더링 경로

웹뷰가 비싼 투명 효과를 애니메이션하는 것을 요청하는 대신 UIKit와 Android overlay 뷰로 로더를 표시하세요.

가변적인 위치

로더를 웹뷰의 안전 영역에 인셋이 적용된 주변에, 화면의 중앙, 화면의 가장자리에, 크롬 스타일의 위쪽, 또는 풀 스크린으로 표시하세요.

내장 로더 및 자산 로더

네이티브 Siri 스타일, Siri v2 Edge, 크롬 위쪽 진행, 오리온, 링, 펄스, 점, 바, 웨이브, 할로, 이미지, 또는 Lottie 기반 로더를 사용하세요.

호출할 수 있는 모든 곳

자바스크립트, 스위프트, 코틀린, 또는 다른 네이티브 플러그인에서 공공 네이티브 API를 통해 로더를 트리거합니다.

사용하는 경우

사용하는 경우

@capgo/capacitor-native-loader WebView가 바쁘거나, 크기를 조절중이거나, 네이티브 표면 뒤에 숨겨진 동안, 부드럽게, 투명하게, 네이티브로 유지되어야 하는 로딩 상태를 위한 것입니다.

사용할 때:

  • 웹 콘텐츠 위에 투명한 풀 스크린 로딩 레이어
  • 웹뷰 크기를 조절하는 대신 콘텐츠를 가리는 Chrome-style 상단 진행바
  • 앱의 상단, 하단, 왼쪽, 오른쪽에 위치한 에지 로더
  • 네이티브 콘텐츠가 화면의 일부를 차지하는 동안 리사이즈된 WebView 주변의 로더
  • 네이티브 콘텐츠가 화면의 일부를 차지하는 동안 네이티브 fallback 로더
  • 네이티브 플러그인에 의해 트리거된 JavaScript가 준비되지 않은 상태에서 공유 로더
  • Lottie, 이미지, 또는 리모트 애셋 백드 로딩 애니메이션

Demo Styles

Demo Styles 섹션
Style미리보기
SiriSiri-style 네이티브 로더 미리보기
Siri v2Siri v2 풀 스크린 에지 네이티브 로더 미리보기
Chrome 상단Chrome-style 상단 네이티브 로더 미리보기
RingRing Native Loader Preview
DotsDots Native Loader Preview
BarsBars Native Loader Preview
WaveWave Native Loader Preview
OrbitOrbit Native Loader Preview
PulsePulse Native Loader Preview
하로하로 네이티브 로더 미리보기
주변주변 화면 네이티브 로더 미리보기
로티로티 네이티브 로더 미리보기
이미지이미지 네이티브 로더 미리보기

코어 API

코어 API
  • show(options) 로더를 표시하고 반환합니다. id.
  • update(options) 기존 로더를 변경하는 데 사용할 수 있습니다. overlay를 제거하지 않습니다.
  • setProgress(options) 업데이트가 결정적인 로더 진행을 표시합니다.
  • hide(options) 하나의 로더를 제거합니다.
  • hideAll(options) 모든 로더를 제거합니다.
  • setWebViewLayout(options) 웹뷰/바디 크기를 조절하거나 로더를 웹뷰/바디에 삽입하여 그 옆에 위치시킵니다.
  • resetWebViewLayout(options?) 원래 웹뷰/바디 레이아웃을 복원합니다.
  • getState() 현재 표시 중인 로더 id를 반환합니다.
  • configure(options) 기본 스타일, 위치, 색상, 동작, 및 동작을 설정합니다.

위치 모델

위치 모델 제목

placement 로더의 위치를 제어합니다:

  • fullscreen 전체 앱을 덮고 optionally 투명합니다.
  • center 웹뷰 위에 작은 로더를 떠다니게 합니다.
  • top, bottom, left그리고 right 안전 영역에 대한 경계에 로더를 고정합니다.
  • chrome 스타일은 전체 너비의 네이티브 탑 바를 사용하고 webView.mode: 'resize'.
  • around 스크린 프레임 주변에서 로더의 움직임을 렌더링합니다.
  • custom 네이티브 플러그인 또는 분할 뷰 워크플로우에서 명시적인 프레임을 사용합니다.

사용하세요. interactionMode: 'passThrough' 사용자가 웹 뷰와 상호 작용할 수 있는 경우 block 로딩이 탭을 방지해야 하는 경우, 또는 loaderOnly 로더 표면만 터치 이벤트를 받을 수 있는 경우

capgo/capacitor-네이티브 로더에서 계속하기

capgo/capacitor-네이티브 로더에서 계속하기

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-네이티브 로더를 사용하는 경우 @capgo/capacitor-native-loader @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader 자연스러운 네이티브 미디어 및 인터페이스 동작을 계획하고, 시작하기 @capgo/capacitor-native-네이티브 네비게이션 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions