메뉴로 바로가기
Capgo - Capacitor 앱의 실시간 업데이트 Capgo

@capgo/capacitor-native-loader

iOS와 Android에서 네이티브 뷰를 사용하여 WebView 위, 아래, 주변 또는 대신 렌더링하는 정교한 로더를 렌더링합니다.
시작하기 GitHub

자연스러운 렌더링 경로

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

가변적인 위치

로더를 웹뷰의 위쪽, 중앙, 가장자리에 고정하거나 Chrome-style로 표시하거나 안전 영역에 인셋이 있는 웹뷰 주변에 표시하세요.

내장 및 자산 로더

자연스러운 Siri-style, Siri v2 edge, Chrome top progress, orbit, ring, pulse, dots, bars, wave, halo, image, 또는 Lottie-based 로더를 사용하세요.

호출할 수 있는 모든 곳

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

사용할 때

자연스러운 로딩 상태를 유지하고 WebView가 바쁜 중, 리사이즈 중, 네비게이션 중, 또는 네이티브 표면 뒤에 숨겨진 경우 투명하고 네이티브로 유지하세요.

@capgo/capacitor-native-loader 사용할 때

사용할 때 필요합니다:

  • 웹 콘텐츠 위에 투명한 풀 스크린 로딩 레이어
  • Chrome-style 상단 진행 표시줄을 사용하여 WebView 크기를 조정하는 대신 콘텐츠를 덮지 않습니다
  • 앱의 상단, 하단, 왼쪽, 오른쪽에 로더를 표시합니다
  • 리사이즈된 WebView 주변에 로더를 표시하는 동안 네이티브 콘텐츠가 화면 일부를 소유합니다
  • 네이티브 콘텐츠가 화면 일부를 소유하는 동안 WebView 리사이즈 중 로더를 표시합니다
  • 네이티브 로더가 중량 웹 렌더링, 경로 변경, 또는 시작 작업과 같은 상황에서 살아남습니다
  • JavaScript가 준비되기 전에 다른 네이티브 플러그인에 의해 트리거된 공유 로더

데모 스타일

데모 스타일 섹션
스타일미리보기
SiriSiri-style 네이티브 로더 미리보기
Siri v2Siri v2 풀 스크린 에지 네이티브 로더 미리보기
Chrome topChrome-style top 네이티브 로더 미리보기
Ringnative 로더 미리보기
DotsDots native 로더 미리보기
BarsBars native 로더 미리보기
WaveWave native 로더 미리보기
OrbitOrbit native 로더 미리보기
PulsePulse native 로더 미리보기
HaloHalo native loader preview
AroundAround-screen native loader preview
LottieLottie native loader preview
ImageImage native loader preview

Core API

Core API
  • show(options) __CAPGO_KEEP_0__를 보여주고 반환한다. id.
  • update(options) __CAPGO_KEEP_0__가 이미 존재하는 경우 로더를 업데이트하여 overlay를 제거하지 않는다.
  • setProgress(options) __CAPGO_KEEP_0__의 결정적 로더 진행률을 업데이트한다.
  • hide(options) 한 개의 로더를 제거합니다.
  • hideAll(options) 모든 로더를 제거합니다.
  • setWebViewLayout(options) 웹뷰/바디 크기를 조정하거나 내부에 로더를 삽입하여 원래 크기와 함께 로더를 옆에 둘 수 있습니다.
  • resetWebViewLayout(options?) 원래 웹뷰/바디 레이아웃을 복원합니다.
  • getState() 현재 표시 중인 로더 아이디를 반환합니다.
  • configure(options) 기본 스타일, 위치, 색상, 동작, 및 동작을 설정합니다.

위치 모델

위치 모델

placement 원본 surface의 위치를 제어합니다:

  • fullscreen 전체 앱을 덮어, optionally 투명합니다.
  • center 웹뷰 위에 작은 로더를 떠다니게 합니다.
  • top, bottom, left위치, 스타일, 색상, 동작, 및 동작을 설정합니다. right __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 안전한 영역에 인식하는 Edge에 고정합니다.
  • chrome __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader와 잘 어울리는 넓은 화면의 원래 상단 바를 사용하는 스타일입니다. webView.mode: 'resize'.
  • around 화면 프레임 주변에서 로더의 움직임을 렌더링합니다.
  • custom 네이티브 플러그인 또는 분할 뷰 워크플로우를 위해 명시적인 프레임을 사용합니다.

사용하세요. interactionMode: 'passThrough' 사용자가 WebView와 상호 작용할 수 있는 경우, block 로딩이 탭을 방지하거나, loaderOnly 로더 표면만 터치 입력을 받을 때,

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

capgo/capacitor-native-loader에서 계속 진행하세요

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 사용하고 있다면 capgo/capacitor-native-loader native media와 인터페이스 동작을 계획하고 연결하세요. Getting Started implementation 세부 사항을 위해 @capgo/capacitor-native-navigation native Chrome 및 WebView 레이아웃을 위해 @capgo/capacitor-transitions 웹 경로 동작을 위해 Using @capgo/capacitor-native-loader 튜토리얼을 위해.