Image-Cache-It

Glide - Android

SDWebImage - IOS

安装

NativeScript 6.5x

• tns plugin add nativescript-image-cache-it

NativeScript 4x

• tns plugin add [email protected]

NativeScript 3x

• tns plugin add [email protected]

NativeScript 2x

• tns plugin add [email protected]

使用方法

import { ImageCacheIt } from 'nativescript-image-cache-it';
// **new** call in your app.ts/ main.ts/ app.js to enable image-cache to hook into the device's lowmemory events
ImageCacheIt.enableAutoMM();

设置要加载的图片 URL。

load = image;

设置下载图片时的占位符。

placeHolder = '~/assets/images/ph.png';

设置下载失败的图片的占位符。

errorHolder = '~/assets/images/broken.png';

设置解码后的图片大小。

decodedWidth = '300';
decodedHeight = '300';

拉伸

stretch = "aspectFit" // (optional) aspectFit || aspectFill || fill || none

预取

import { ImageCacheIt } from 'nativescript-image-cache-it';
ImageCacheIt.fetchItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch();

从缓存中删除项

import { ImageCacheIt } from 'nativescript-image-cache-it';
ImageCacheIt.deleteItem('https://source.unsplash.com/random').then().catch();

从缓存中获取项

import { ImageCacheIt } from 'nativescript-image-cache-it';
ImageCacheIt.getItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch();

例如

import { ImageCacheIt } from 'nativescript-image-cache-it';
let cache = new ImageCacheIt();
cache.src = image;
cache.placeHolder = '~/assets/images/broken.png';
cache.errorHolder = '~/assets/images/ph.png';
cache.decodedWidth = '300';
cache.decodedHeight = '300';
cache.filter = 'blur(10px);';
cache.stretch = 'aspectFit';
return cache;

XML 标记设置

decodedWidth="300"; <!-- (optional) -->
decodedHeight="300"; <!-- (optional) -->
placeHolder="~/assets/images/ph.png" <!-- (optional) -->
errorHolder="~/assets/images/broken.png"  <!-- (optional) -->
stretch = "aspectFit" <!-- (optional) -->
src= "http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg" <!-- (required) -->

重要：确保在 Page 元素上包含 xmlns:i="nativescript-image-cache-it"

例如

<i:ImageCacheIt stretch="aspectFit"  resize="300,300" placeHolder="~/assets/images/ph.png" errorHolder="~/assets/images/broken.png" src="http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg"/>

Angular

import { TNSImageCacheItModule } from 'nativescript-image-cache-it/angular';

@NgModule({
    imports: [
    TNSImageCacheItModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

屏幕截图

Repeater

Image	ImageCacheIt

ListView

Image	ImageCacheIt