如何下载图像并在NativeScript应用程序中显示？

Question

我正在创建一个应该适用于Android和iOS的NativeScript应用程序.我需要显示S3存储桶中的一些图像.

因为我想在下载图像时显示一些进度指示器,我想我应该在本地下载图像,而不是仅仅设置Image组件的source属性.什么是最好的事情？

Answer 1

经过一番研究后,我发现了这个样本https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/,它有很多从互联网上下载的图像.

我使用的是一个名为image-cache的模块,可以解决这个问题.

这是我更精确地使用的内容:

var imageSourceModule = require("image-source");
var imageCache = require("ui/image-cache");

var cache = new imageCache.Cache();
var defaultImageSource = imageSourceModule.fromFile("~/app/res/loading.gif");
var defaultNotFoundImageSource = imageSourceModule.fromFile("~/app/res/no-image.png");

cache.invalid = defaultNotFoundImageSource;
cache.placeholder = defaultImageSource;
cache.maxRequests = 5;

function displayImage(viewModel, url, propertyName) {
  var source = cache.get(url);

  propertyName = propertyName || "image";

  if (source) {
    viewModel.set(propertyName, source);
  } else {
    viewModel.set(propertyName, defaultImageSource);
    cache.push({
      key: url,
      url: url,
      completed: function (result, key) {
        if (key === url) {
          viewModel.set(propertyName, result);
        }
      }
    });
  }
}

如果有更好的解决方案,我很乐意了解它.