@ticnat/nativescript-image-cache | NativeScript 商城

#Nativescript web image cache 一个轻量级的 NativeScript 插件，封装了 SDImageCacheCache 库（iOS）和 Facebook Fresco（Android）的缓存功能。 支持本地图像。

许可协议

在 MIT 许可协议下发布，任何人都可以自由地将此包含在任何类型的程序中 -- 但是，如果您需要支持合同、更改、增强和/或商业许可，请联系我（[email protected]）。

NS8 安装

tns plugin add @ticnat/nativescript-image-cache

NS7 安装

tns plugin add@ticnat/[email protected]

** 在 NativeScript 7.+ 上进行测试，在旧版本上运行时出现任何问题，请提交问题。**

Vue 中使用

在 main.js

const Vue = require('nativescript-vue'); // you already have something like this
Vue.registerElement('ImageCache', () => require('@ticnat/nativescript-image-cache').ImageCache); // now add this

然后在任何 .vue 文件中

<OtherMarkup>
  <ImageCache src="https://somedomain.com/images/img-file.png" stretch="aspectFill"></ImageCache>
</OtherMarkup>

Angular 中使用

⚠️ 这在插件版本 5.0.0 中已更改！

在 app.module.ts 中，或您想要使用此插件的任何特定模块

import { registerElement } from 'nativescript-angular';
registerElement('ImageCache', () => require('@ticnat/nativescript-image-cache').ImageCache);

初始化后，可以在组件模板中使用 <ImageCache></ImageCache> 标记。

<GridLayout rows="*" columns="*">
	<ImageCache stretch="fill" row="0" col="0" placeholder="localPlaceholderImgorResUrl" src="#your image url here"> </ImageCache>
</GridLayout>

图像缓存

添加具有 src 属性设置为 url 的 ImageCache 元素，就像在需要图像缓存的地方使用常规图像标签一样。
stretch 属性可以取以下值 - https://docs.nativescript.cn/api-reference/modules/_ui_enums_.stretch.html
placeholder 接受本地图像 url 的文件路径（~/）或资源（res://）形式
placeholderStretch 可以为 仅 Android 设置，用于指定占位图图像的拉伸，值与 stretch 相同。对于 iOS，没有单独的占位图拉伸属性（原生库似乎不支持）。

检查图像是否正在加载

使用 angular 的 模板变量引用 和 @ViewChild 装饰器获取 ImageCache 视图的引用，并检查 isLoading 属性（与 NativeScript Image 的 isLoading 属性相同）。
仅在视图初始化后获取引用，即 ngAfterViewInit 被调用后，在 ngOnInit 中获取引用可能返回 undefined（有关详细信息，请参阅 angular 组件生命周期钩子）。

标记

    <ImageCache stretch="fill" row="0"
                 col="0"
                 src="#your image url" #container>
    </ImageCache>

支持组件类片段

     @ViewChild("container") container : any;
     ngAfterViewInit(){
          isLoading = this.container.nativeElement.isLoading;
     }

清除缓存

导入模块，调用 clearCache() 方法，默认时间为 SDImageCacheCache 为 7 天，Fresco 为 60 天，之后缓存将自动清除。

 import {clearCache} from "@ticnat/nativescript-image-cache";
 clearCache();

设置自定义缓存清除时间

默认缓存清除时间可以指定为天数。

import {setCacheLimit} from "@ticnat/nativescript-image-cache";
/* Add the code component at a a proper hook */
var cacheLimitInDays : number = 7;
setCacheLimit(cacheLimitInDays);

在 VanillaJS/TypeScript 应用中使用的示例

如果是在 Android 上，在使用或清除缓存之前需要初始化插件，iOS 上不需要初始化。

在 Android 上初始化 - 在 app.js 中

var imageCache = require("@ticnat/nativescript-image-cache");
if (application.android) {
    application.onLaunch = function (intent) {
            imageCache.initialize();
    };
}

初始化后，将命名空间属性 xmlns:IC="@ticnat/nativescript-image-cache" 添加到 xml 页面的开头标签。应在需要图像缓存的地方使用 <IC:ImageCache></IC:ImageCache> 标记表示图像。

    <Page xmlns:IC="@ticnat/nativescript-image-cache">
        <GridLayout rows='*' columns='*'>
            <IC:ImageCache stretch="fill" row="0"
             col="0"  id="my-image-1" placeholder="urlToLocalPlaceholderImage"
             src="#image-url">
             </IC:ImageCache>
        </GridLayout>
    </Page>

图像缓存

将命名空间属性 xmlns:IC="@ticnat/nativescript-image-cache" 添加到 xml 页面的开头标签。
添加具有 src 属性设置为 url 的 IC:ImageCache 元素，就像在需要图像缓存的地方使用常规图像标签一样。
stretch 属性可以取以下值 - https://docs.nativescript.cn/api-reference/modules/_ui_enums_.stretch.html
placeholder 接受本地图像 url 的文件路径（~/）或资源（res://）形式
placeholderStretch 可以为 仅 Android 设置，用于指定占位图图像的拉伸，值与 stretch 相同。对于 iOS，没有单独的占位图拉伸属性（原生库似乎不支持）。

检查图像是否正在加载

要检查图片是否正在加载，通过使用page.getViewById("myImageCache")获取ImageCache视图的引用，并检查isLoading属性（与NativeScript Image的isLoading属性相同）。

var imageCacheModule=require("@ticnat/nativescript-image-cache");

var myImage1 = page.getViewById("my-image-1"),
    isLoading = myImage1.isLoading;

清除缓存

需要导入模块，调用clearCache()方法，SDImageCacheCache的默认时间为7天，Fresco为60天，之后缓存将自动清除。

var imageCacheModule=require("@ticnat/nativescript-image-cache");
imageCacheModule.clearCache();

设置自定义缓存清除时间

默认缓存清除时间可以指定为天数。

var imageCache = require("@ticnat/nativescript-image-cache");

在适当的位置添加代码组件：var cacheLimitInDays = 7; imageCache.setCacheLimit(cacheLimitInDays);

对于Android，需要在清除缓存之前在应用的onlaunch事件中进行初始化

需要在您的NativeScript项目中使用速度吗？我可以根据您的业务需求构建美观且性能卓越的NativeScript应用程序。直接给我发邮件讨论项目详情：[email protected]