@capgo/capacitor-native-loader

在 iOS 和 Android 设备上使用原生视图渲染精美的加载器，置于或取代 WebView。

原生渲染路径

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

灵活的布局

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

内置和资产加载器

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

可调用的任何地方

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

何时使用它

@capgo/capacitor-native-loader 用于保持 WebView 正在忙、缩放、导航或被原生表面遮挡时，加载状态应该保持smooth、透明和原生的状态。

当您需要时使用：

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

Demo Styles

样式	预览
Siri
Siri v2
Chrome top
Ring
点点
进度条
波浪
轨迹
脉冲
光环
周围
Lottie
图像

核心API

show(options) 显示一个加载器并返回其 id.
update(options) 更新一个现有的加载器而不销毁覆盖层
setProgress(options) 更新确定的加载器进度
hide(options) 移除一个加载器。
hideAll(options) 移除所有加载器。
setWebViewLayout(options) 调整或缩进 WebView/body 以使原生加载器可以与其并排显示。
resetWebViewLayout(options?) 恢复原始 WebView/body 布局。
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 查看教程