@nstudio/nativescript-shimmer

为 NativeScript 量身定制的 Shimmer

npm install @nstudio/nativescript-shimmer

用法

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:ui="@nstudio/nativescript-shimmer">
  ...
    <ui:Shimmer>
        <GridLayout>
            <ContentView height="20" width="65%" backgroundColor="#333"/>
        </GridLayout>
    </ui:Shimmer>

也可以使用各种口味进行注册，例如与 Angular

import { registerElement } from '@nativescript/angular';
import { Shimmer } from '@nstudio/nativescript-shimmer';

registerElement('Shimmer', () => Shimmer);

// can now be used in components:
<Shimmer>
    <GridLayout>
        <ContentView height="20" width="65%" backgroundColor="#333"/>
    </GridLayout>
</Shimmer>

属性

• autoStart: boolean：默认为 true。使用 <Shimmer autoStart="false"> 来禁用自动启动

仅限 iOS:

您可以在任何视图上静态地启动 shimmer

import { Shimmer } from '@nstudio/nativescript-shimmer';

loadedView(args) {
    view = args.object;
    // start shimmer
    Shimmer.start(view);
    // stop shimmer
    Shimmer.stop(view);
}

Android 总是需要 Shimmer 实例来启动效果，但是您可以通过将实例传递给 Shimmer.stop(view /* shimmer 实例 */) 来静态地停止 shimmer 效果。

• Shimmer.defaults：您可以在您的应用中调整任何默认效果设置（通常在 app.ts 或 main.ts 中进行，取决于您的口味，在启动之前）以避免每次配置效果时传递相同的设置

Shimmer.defaults = {
    speed: 0.9,
    direction: ShimmerDirection.topToBottom,
    repeat: 4,
    lightColor: 'rgba(255,255,255,.8)',
    darkColor: 'rgba(0,0,0,.7)',
};

// bootstrap app...

许可证

Apache 许可证版本 2.0