Question

我正在加载项目列表，每个项目都有每个项目的缩略图的URL参考。使用RadListView渲染列表时，我注意到每个图像都已从服务器加载了几次。这仅在iOS中发生，在Android中每个缩略图仅加载一次。但是，该视图是正确的（没有重复项）。

NativeScript版本为5.1.1

import { NavigationActions } from 'react-navigation';

let navigator;

function setTopLevelNavigator(nav_ref) { navigator = nav_ref }

function navigate(route_name, params) {
  navigator.dispatch(
    NavigationActions.navigate({
      route_name,
      params
    })
  )
}

export default {
  navigate,
  setTopLevelNavigator
};

使用iOS和Android，API服务器在相同列表负载下的输出。

使用iOS（错误）：

获取/ v4 / item / file / display / 1/404找不到
GET / v4 / item / file / display / 1/404未找到
GET / v4 / item / file / display / 2/404未找到
GET / v4 / item / file / display / 2/404未找到
GET / v4 / item / file / display / 1/404未找到
GET / v4 / item / file / display / 2/404未找到
GET / v4 / item / file / display / 1/404未找到
GET / v4 / item / file / display / 2/404未找到
POST / v4 / item / list / 200 OK

使用Android（正确）：

获取/ v4 / item / file / display / 1/404找不到
GET / v4 / item / file / display / 2/404未找到
POST / v4 / item / list / 200 OK

（以相反的顺序，请忽略404，我更好地更改了路径以区分每个调用）

Answer 1

使用ListView时，当您向下/向上滚动时，它将重复使用项目模板。假设如果在ListView上加载了100个数据项，则不会创建100个View / Image组件。取决于屏幕的可见区域，它可能会创建一些图像，当您向上/向下滚动时，相同的视图将被其他数据项重复使用以保持性能。这是使用ListView或RadListView的优点。

谈到多次加载图片的原因，默认情况下，Android会缓存图片并在后续请求中使用它。有了iOS，事实并非如此。因此，当您向上/向下滚动时，每次需要渲染图像时，它都会点击URL。

解决方案是将图像缓存在临时存储中。您可以简单地使用http模块和一些逻辑语句来完成此操作，或者为此目的在市场上甚至可以找到几个插件，nativescript-web-image-cache或nativescript-image-cache-it就是其中的几个。

在RadListView上多次请求图像

1 个答案: