가이드
Capacitor에서 Native Loader 사용하는 법
@capgo/capacitor-native-loader 사용하기
@capgo/capacitor-native-loader iOS 및 Android 네이티브 뷰를 통해 로딩 상태를 렌더링합니다. WebView가 바쁠 때 로더를 부드럽게 유지해야 하거나, CSS로 투명 전체 화면 효과를 구현하기 무거울 때, 또는 JavaScript가 준비되기 전 네이티브 플러그인이 로딩 UI를 보여줘야 할 때 사용하세요.
설치
npm install @capgo/capacitor-native-loader
npx cap sync
전체 화면 Native Loader
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 });
WebView 크기 조절 기능이 포함된 Edge Loader
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 스타일 상단 프로그레스 바
과도한 작업 중 CSS 애니메이션을 요청하지 않고도, WebView 상단에 브라우저와 유사한 로딩 바를 표시하고 싶을 때 사용하세요.
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 });
Siri V2 Edge Loader
사용하세요: siri-v2 WebView를 계속 보여주면서 화면 가장자리에 색상이 움직이는 네이티브 전체 화면 로더입니다.
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 Loader
await NativeLoader.show({
style: 'lottie',
placement: 'center',
asset: {
type: 'lottie',
source: 'loader.json',
loop: true,
},
});
Bundled assets는 네트워크 요청 및 JavaScript 초기화 전에 사용 가능하므로 스타트업 로더에 가장 적합합니다.
네이티브 플러그인 호출
이 플러그인은 공개 네이티브 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/Cap-go/capacitor-native-loader/
- 문서: /docs/plugins/native-loader/
@capgo/capacitor-native-loader 사용법 다음 단계
사용 중인 경우 @capgo/capacitor-native-loader 사용하기 네이티브 미디어 및 인터페이스 동작을 설계하려면, 이를 다음 항목과 연결하세요 @capgo/capacitor-native-loader 구현 세부 사항은, 시작하기 설정용, @capgo/capacitor-native-navigation 사용하기 네이티브 Chrome 및 WebView 레이아웃용, @capgo/capacitor-transitions 사용하기 WebView 라우트 전환용.