0

我正在创建一个可以在 Android 和 iOS 上运行的 NativeScript 应用程序。我需要显示 S3 存储桶中的一些图像。

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

4

2 回答 2

5

经过更多研究后,我发现了这个示例https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/并且它有大量从 Internet 下载的图像。

我使用的是一个名为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);
        }
      }
    });
  }
}

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

于 2015-04-02T13:33:49.827 回答
0

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

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

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

于 2019-03-20T23:52:57.720 回答