## 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 接受本地图片 url 的文件路径（~/）或资源（res://）形式
• 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 接受本地图片 url 的文件路径（~/）或资源（res://）形式
• 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 事件中初始化。