@capgo/capacitor-native-loader

在 iOS 和 Android 设备上使用原生视图，渲染在 WebView 上方、下方、周围或取代 WebView。

原生渲染路径

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

灵活的位置

将加载器置于全屏幕、居中、固定到边缘、Chrome 样式顶部或安全区域内周围的 WebView 中。

内置和资产加载器

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

可调用的任何地方

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

何时使用它

@capgo/capacitor-native-loader 用于保持 WebView 正在忙、调整大小、导航或被原生表面遮盖时的smooth、透明和原生的加载状态。

当您需要时使用:

在网页内容上方显示透明全屏加载层
Chrome样式顶部进度条， WebView可以调整大小而不覆盖内容
在应用程序的顶部、底部、左侧或右侧显示边缘加载器
在 WebView调整大小时，加载器围绕着它，而原生内容占据屏幕的一部分
原生fallback加载器，能够在web渲染重度、路由变化或启动工作时生存
在JavaScript准备就绪之前，由另一个原生插件触发的共享加载器
使用Lottie、内置图像或远程资源支持的加载动画

Demo Styles

Style	Preview
Siri
Siri v2
Chrome top
Ring
点点
条条
波浪
轨迹
脉冲
光环
周边
Lottie
图像

核心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 使用显式框架为本机插件或分屏工作流程。

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

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

如果您正在使用 @capgo/capacitor-native-loader 为native媒体和界面行为制定计划，连接它开始查看实现细节 @capgo/capacitor-native-navigation native Chrome 和 WebView 布局 @capgo/capacitor-transitions web 路由运动使用 @capgo/capacitor-native-loader 查看教程