在 NativeScript 的 StackLayout 或 ListView 中使用 ImageCache答案

【问题标题】：Using ImageCache in a StackLayout or ListView in NativeScript在 NativeScript 的 StackLayout 或 ListView 中使用 ImageCache
【发布时间】：2017-04-05 12:53:34
【问题描述】：

我有一个项目列表，每个项目都有一张图片。我想缓存图片。

所以，我在 XML 中有大致这样的内容：

        <StackLayout>
        <GridLayout>
          <gv:GridView items="{{ kats }}" verticalSpacing="0" horizontalSpacing="0"
                       colWidth="{{ colWidth }}"  rowHeight="100" padding="0"
                       itemTap="openKat" itemLoading="mainLoading">
            <gv:GridView.itemTemplate>
                <GridLayout columns="*" rows="80,20">
                    <Image row="0" src="{{ Image, Image | mkThumbLink() }}" />
                    <Label row="1" text="{{ description }}" />
                </GridLayout>
            </gv:GridView.itemTemplate>
          </gv:GridView>
        </GridLayout>
    </StackLayout>

在 .js 文件中是作为转换器调用的函数：

var imageCacheModule = require("ui/image-cache");
var imageSource = require("image-source");
var fs = require("file-system");
var cache = new imageCacheModule.Cache();
var mkThumbLink = {
    // this method gets called as the page is loading.
    toView: function(img) {
        cache.placeholder = imageSource.fromFile(fs.path.join(__dirname, "res:speaker_1.jpg"));
        cache.maxRequests = 25;
        // Enable download while not scrolling
        cache.enableDownload();
        var imgSource;
        var url = 'http://www.domain.com' + img;
        // Try to read the image from the cache
        var image = cache.get(url);
        if (image) {
            // If present -- use it.
            imgSource = imageSource.fromNativeSource(image);
        }
        else {
            // If not present -- request its download.
            cache.push({
                key: url,
                url: url,
                completed: function (image, key) {
                    if (url === key) {
                        imgSource = imageSource.fromNativeSource(image);
                    }
                }
            });
        }
        // Disable download while scrolling
        cache.disableDownload();    
        return imgSource;
    },
    toModel: function(img) {
        // this section does not get called at all
    }
};

页面加载上的每个图像都会调用 toView 方法，但我不知道如何在图像到达时将其推回页面。我猜在“cache.push.completed”部分？

【问题讨论】：

嘿，这个问题有什么进展吗？

标签： android nativescript

【解决方案1】：

我把这个留给那些仍在寻找答案的人。这对我有用。我使用了 TypeScript。

public get itemImage() : imageSource.ImageSource {
    if (constants.IS_DEBUG) console.log("Attempting to fetch image for: " + this.key);

    var cache = new imageCacheModule.Cache();
    cache.placeholder = imageSource.fromResource("background");
    cache.maxRequests = 2;

    var imgSource: imageSource.ImageSource = cache.placeholder;

    if (this.imageExists && this.itemImageUrl !== '') {
        // Try to read the image from the cache
        var image = cache.get(this.itemImageUrl);
        if (image) {
            // If present -- use it.
            if (constants.IS_DEBUG) console.log("Image found in cache");
            imgSource = imageSource.fromNativeSource(image);
        }
        else {
            // If not present -- request its download.
            if (constants.IS_DEBUG) console.log("Image not cached, downloading...");
            cache.enableDownload();
            cache.enqueue({
                key: this.itemImageUrl,
                url: this.itemImageUrl,
                completed: (image: any, key: string) => {
                    if (constants.IS_DEBUG) console.log("Image downloaded");
                    cache.disableDownload();
                    if (this.itemImageUrl === key) {
                        imgSource = imageSource.fromNativeSource(image);
                        this.set('itemImage', imgSource);
                    }
                }
            });
        }
    }

    return imgSource;
}

做这项工作的线路是this.set('itemImage', imgSource);

【讨论】：