@capgo/capacitor-native-loader

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

开始使用 GitHub

原生渲染路径

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

灵活的布局

将加载器放置在全屏幕、居中、固定在边缘、Chrome 风格顶部或安全区域内的 WebView 周围。

内置和资产加载器

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

可在任何地方调用。

通过公共原生 API 从 JavaScript、Swift、Kotlin 或其他原生插件触发加载器。

何时使用它

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

使用它时需要：

在 web 内容上方显示透明全屏加载层
可以调整 WebView 尺寸而不覆盖内容的 Chrome 样式顶部进度条
在应用的顶部、底部、左侧或右侧显示边缘加载器
在 WebView 重绘、导航或启动工作时，加载器周围的 WebView 加载
原生 fallback 加载器，能够在重度 web 渲染、路由更改或启动工作时生存
JavaScript 加载器被另一个 native 插件触发之前
Lottie、捆绑图像或远程资源支持的加载动画

演示样式

样式	预览
Siri
Siri v2
Siri v2 横幅式 native loader 预览
Ring
点点
进度条
波浪
Orbit
脉冲
光环
环绕
Lottie
图片

核心API

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

展示模型

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

fullscreen 覆盖整个应用，选项卡可半透明。
center 在 WebView 上方浮动一个紧凑的加载器。
top, bottom, left，和 right 将加载器固定到安全区域感知的边缘。
chrome 样式使用全屏原生顶部栏，并与 webView.mode: 'resize'.
around 在屏幕边框周围渲染加载器动画。
custom 使用显式框架来为原生插件或分屏工作流程。

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

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

如果您正在使用 @capgo/capacitor-native-loader 来规划原生媒体和界面行为，连接它到开始获取实现细节 @capgo/capacitor-native-navigation 原生浏览器和 WebView 布局 @capgo/capacitor-transitions 对于 Web 路由运动，和使用 @capgo/capacitor-native-loader 用于教程。