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);
        }
      }
    });
  }
}

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

Answer 2

有一个名为nativescript-web-image-cache的插件。根据他们的npm页面：

一个简约的NativeScript插件，仅包装缓存适用于iOS和Facebook Fresco的SDWebImageCache库的功能对于Android。支持本地图像。

您还可以检查图像是否正在加载，例如通过使用角度模板变量引用和@ViewChild装饰器，获取对WebImage视图的引用，并检查isLoading属性（与NativeScript Image的isLoading属性相同）。

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

2 个答案: