nativescript-web-image-cache | NativeScript 市场平台

#Nativescript web image cache 一个轻量级的 NativeScript 插件，仅包装 SDWebImageCache 库的缓存功能，用于 iOS 和 Facebook Fresco，用于 android 的图像缓存。 支持本地图像。

许可证

在 MIT 许可证下发布，任何人都可以免费将其包含在任何类型的程序中 -- 然而，如果您需要支持合同、更改、增强和/或商业许可证，请与我联系（[email protected]）。

安装

tns plugin add nativescript-web-image-cache

** 在 NativeScript 2.3+ 上进行了测试，包括 Angular 2 和 VanillaJS，如果在运行旧版本时出现任何问题，请更新。此版本的插件有破坏性更改，如果您正在使用此插件的 1.0.3 版本，请迁移，迁移很容易，此版本的插件还支持 android，如果您仍然希望运行旧版本，请使用 tns plugin add [email protected]。**

Vue 中的使用

在 main.js 中

const Vue = require("nativescript-vue") // you already have something like this
Vue.registerElement('WebImage', () => require('nativescript-web-image-cache').WebImage) // now add this

然后在任何 .vue 文件中

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

Angular 中的使用

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

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

import { registerElement } from "nativescript-angular";
registerElement("WebImage", () => require("nativescript-web-image-cache").WebImage);

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

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

缓存图像

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

检查图像是否正在加载

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

标记

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

后端组件类片段

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

清除缓存

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

 import {clearCache} from "nativescript-web-image-cache";
 clearCache();

设置自定义缓存清除时间

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

import {setCacheLimit} from "nativescript-web-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("nativescript-web-image-cache");
if (application.android) {
    application.onLaunch = function (intent) {
            imageCache.initialize();
    };
}

初始化后，将命名空间属性 xmlns:IC="nativescript-web-image-cache" 添加到 xml 页面的打开标签。应使用标记标签 <IC:WebImage></IC:WebImage> 来表示图像。

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

缓存图像

将xmlns:IC="nativescript-web-image-cache"添加到xml文件的打开页面标签中。
添加元素IC:WebImage，并将src属性设置为需要图像缓存的url，就像正常图像标签一样。
stretch 属性可以取以下值 - https://docs.nativescript.cn/api-reference/modules/_ui_enums_.stretch.html
placeholder 接受文件路径（~/）或资源（res://）形式的本地图像 url
placeholderStretch 可以在 仅 android 上设置，以指定占位符图像的缩放，值与 stretch 相同。对于 iOS，没有单独的缩放属性用于占位符（原生库似乎不支持）。

检查图像是否正在加载

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

var imageCacheModule=require("nativescript-web-image-cache");

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

清除缓存

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

var imageCacheModule=require("nativescript-web-image-cache");
imageCacheModule.clearCache();

设置自定义缓存清除时间

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

var imageCache = require("nativescript-web-image-cache");
/* Add the code component at a a proper hook */
var cacheLimitInDays = 7;
imageCache.setCacheLimit(cacheLimitInDays);

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