@capgo/capacitor-native-loader

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

开始 GitHub

原生渲染路径

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

灵活的布局

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

内置和资产加载器

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

可在任何地方调用

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

When To Use It

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

使用它时需要：

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

演示样式

样式	预览
Siri
Siri v2
Chrome顶部
环形
点点
条形
波浪
轨道
脉冲
哈罗
环绕
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 [__CAPGO_KEEP_0__]全屏加载器,可选透明。
center [__CAPGO_KEEP_1__]在 WebView 上方浮动一个紧凑的加载器。
top, bottom, left[__CAPGO_KEEP_2__]将加载器固定到安全区域感知的边缘。 right [__CAPGO_KEEP_3__]使用全屏原生顶栏样式,与
chrome [__CAPGO_KEEP_4__]在屏幕框架周围渲染加载器动画。 webView.mode: 'resize'.
around [__CAPGO_KEEP_5__]适用于原生插件或分屏工作流程的显式框架。
custom 使用

[__CAPGO_KEEP_6__]当用户可以继续与 WebView 交互时, interactionMode: 'passThrough' [__CAPGO_KEEP_7__]当加载时应该阻止点击,或 block [__CAPGO_KEEP_8__]当只加载器表面应该接收触摸时。 loaderOnly 从 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-loader 中继续。

Keep going from @capgo/capacitor-native-loader

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