@capgo/capacitor-native-loader

使用原生iOS和Android视图在WebView上方、下方、周围或取代Render精美的加载器。

原生渲染路径

显示加载器作为 UIKit 和 Android 覆盖视图而不是要求 WebView 动画昂贵的透明效果。

灵活的位置

将加载器设置为全屏、居中、固定到边缘、Chrome 样式在顶部、或与 WebView 安全区域感知的内边距周围。

内置和资产加载器

使用原生 Siri 样式、Siri v2 边缘、Chrome 顶部进度、环、环、脉冲、点、条、波、光环、图像或 Lottie 基于的加载器。

可在任何地方调用

通过 JavaScript、Swift、Kotlin 或其他本机插件公开的本机 API 来触发加载器。

何时使用它

@capgo/capacitor-native-loader 用于保持 WebView 正在忙、重置、导航或被本机表面遮挡时，加载状态应保持平滑、透明和本机的。

使用它时需要：

在 web 内容上方显示透明全屏加载层
可以调整 WebView 尺寸而不覆盖内容的 Chrome 样式顶部进度条
在应用程序的顶部、底部、左侧或右侧显示边缘加载器
在 WebView 重置时在屏幕上显示加载器，而本机内容占有部分屏幕
在 WebView 重置时，生存本机内容的重度 web 渲染、路由更改或启动工作的本机 fallback 加载器
由另一个本机插件触发的，JavaScript 未准备好之前共享的加载器
使用 Lottie、内置图像或远程资产支持的加载动画

演示样式

样式	预览
Siri
Siri v2
Chrome 顶部
环形
点点
条形
波浪
轨迹
Pulse
Halo
Around
Lottie
图像

Core API

show(options) 显示加载器并返回其 id.
update(options) 更改现有加载器而不销毁覆盖层
setProgress(options) 更新确定的加载器进度
hide(options) 移除一个加载器
hideAll(options) 移除所有加载器
setWebViewLayout(options) 调整或内嵌 WebView/身体以便原生加载器可以与其并排
resetWebViewLayout(options?) 恢复原始 WebView/身体布局
getState() 返回当前可见的加载器 ID
configure(options) 设置默认样式、位置、颜色、动画和行为

位置模型

placement 控制原生表面的显示位置：

fullscreen 覆盖整个应用，选项性透明。
center 在 WebView 上浮动一个紧凑的加载器。
top, bottom, left和 right 将加载器固定到安全区域感知的边缘。
chrome 样式使用全宽原生顶部栏，配对得很好， webView.mode: 'resize'.
around 在屏幕框架周围渲染加载器动画。
custom 用于

当用户可以继续与 WebView 交互时， interactionMode: 'passThrough' 当加载应该阻止点击时，或者 block 当只加载器表面应该接收触摸时。 loaderOnly __CAPGO_KEEP_0__

继续从 @capgo/capacitor-native-loader 中

如果您正在使用 @capgo/capacitor-native-loader 来规划原生媒体和界面行为，连接它与 Getting Started 获取实现细节 @capgo/capacitor-native-navigation 原生 Chrome 和 WebView 布局 @capgo/capacitor-transitions Web 路由运动使用 @capgo/capacitor-native-loader 为教程准备。