@ capgo capacitor-자연 로더'를 사용합니다.
@capgo/capacitor-native-loader 자연 iOS 및 Android 뷰를 통해 로딩 상태를 렌더링합니다. WebView가 바쁠 때 로더가 smooth하게 유지되도록 하거나, transparent fullscreen 효과가 CSS에서 비싼 경우, 또는 JavaScript가 준비되기 전에 다른 자연 플러그인이 로딩 UI를 표시해야 할 때 사용하세요.
설치
npm install @capgo/capacitor-native-loader
npx cap sync
전체 화면 자연 로더
import { NativeLoader } from '@capgo/capacitor-native-loader';
const { id } = await NativeLoader.show({
style: 'siri',
placement: 'fullscreen',
message: 'Preparing your session',
colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
scrimColor: 'rgba(3, 7, 18, 0.42)',
interactionMode: 'block',
});
await initializeAppData();
await NativeLoader.hide({ id });
EDGE 로더 WebView 리사이즈
await NativeLoader.setWebViewLayout({
mode: 'inset',
insets: { top: 96 },
animated: true,
});
await NativeLoader.show({
style: 'wave',
placement: 'top',
message: 'Syncing changes',
interactionMode: 'passThrough',
});
로딩이 끝나면 WebView를 복원하세요:
await NativeLoader.hideAll({ restoreWebView: true });
Chrome-Style 상단 진행
자연 상단 진행 로더를 사용하여 WebView 위에 브라우저와 같은 로딩 바를 표시하고 싶을 때 CSS가 중량 작업 중인 동안 애니메이션을 요청하지 않으려면 사용하세요.
const { id } = await NativeLoader.show({
style: 'chrome',
placement: 'top',
colors: ['#4285f4', '#34a853', '#fbbc05', '#ea4335'],
thickness: 4,
interactionMode: 'passThrough',
webView: {
mode: 'resize',
insets: { top: 12 },
restoreOnHide: true,
},
});
await NativeLoader.hide({ id, restoreWebView: true });
시리 V2 EDGE 로더
Use siri-v2 웹뷰가 보이는 동안 화면의 테두리에서 색상을 움직이는 네이티브 풀 스크린 로더를 사용하세요.
const { id } = await NativeLoader.show({
style: 'siri-v2',
placement: 'fullscreen',
colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
thickness: 10,
scrimColor: 'rgba(3, 7, 18, 0.10)',
interactionMode: 'passThrough',
});
await NativeLoader.hide({ id });
Lottie 로더
await NativeLoader.show({
style: 'lottie',
placement: 'center',
asset: {
type: 'lottie',
source: 'loader.json',
loop: true,
},
});
번들된 자산은 네트워크 요청과 자바스크립트 초기화 이전에 사용할 수 있기 때문에 시작 로더에 가장 적합합니다.
네이티브 플러그인 호출
이 플러그인은 공개 네이티브 API를 노출하여 다른 플러그인이 로더를 직접 표시하거나 숨길 수 있도록 합니다.
Swift:
import CapgoCapacitorNativeLoader
let id = NativeLoader.shared.show(options: [
"style": "orbit",
"placement": "fullscreen",
"message": "Opening secure session"
])
NativeLoader.shared.hide(id: id)
Kotlin:
import app.capgo.nativeloader.NativeLoader
val id = NativeLoader.show(
activity = activity,
options = mapOf(
"style" to "orbit",
"placement" to "fullscreen",
"message" to "Loading profile",
),
webView = bridge.webView,
)
NativeLoader.hide(id)
유용한 링크
- GitHub: https://github.com/Capgo/capacitor-native-loader/
- Native Loader를 사용하세요.
capgo/capacitor-native-loader를 계속 사용하세요.
만약 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 사용 중이라면 capgo/capacitor-native-loader를 사용하여 자연적인 미디어 및 인터페이스 동작을 계획하고 싶다면 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader와 연결하세요. capgo/capacitor-native-loader 구현에 대한 자세한 내용은 Getting Started 설정에 대한 자세한 내용은 설치에 사용합니다. @capgo/capacitor-native-네비게이션 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions를 사용하여 @capgo/capacitor-전환 사용 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader를 계속 사용하세요.