@capgo/capacitor-native-loader

原生渲染路径

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

灵活的布局

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

内置和资产加载器

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

可在任何地方调用。

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

何时使用它

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

使用它时需要：

• 在 web 内容上方显示透明全屏加载层
• 可以调整 WebView 尺寸而不覆盖内容的 Chrome 风格顶部进度条
• 顶部、底部、左侧或右侧的边缘加载器
• 在 WebView 尺寸调整时，原生内容占据屏幕的一部分的加载器
• 在重型 web 渲染、路由更改或启动工作时生存的原生 fallback 加载器
• 由 JavaScript 未准备就绪前，触发的共享加载器
• Lottie、捆绑图像或远程资产支持的加载动画

注意

对于仅限 Web 路由动画，请使用 @capgo/capacitor-transitions. 使用 Native Loader 时，加载状态本身应该是原生或 WebView 需要在加载期间调整大小。

演示样式

样式	预览
Siri
Siri v2
Chrome顶部
环形
点点
条形
波浪
Orbit
脉冲
光环
环绕
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 使用显式框架为原生插件或分屏工作流程。

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

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

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