Question

我正在使用React Native，我遇到的问题是下载缩略图。实际上，我正在下载29889拇指，这太慢了。这是我的代码：

recursive_thumb(skip, count) {
  if (skip < this.state.totalMarkerCount) {
    let thumbs = []
    for (let i = 0; i < count; i += 1) {
      thumbs.push(this.downloadThumb(this.state.thumbs[skip + i]))
    }
    Promise.all(thumbs)
      .then(data => {
        this.setState({
          totalCount: this.state.totalMarkerCount,
          fetchedCount: skip + count
        })
        this.recursive_thumb(skip + count, count)
    })
     .catch(reason => {
       this.recursive_thumb(skip + count, count)
       this.setState({
         totalCount: this.state.totalMarkerCount,
         fetchedCount: skip + count
       })
     })
} else {
  setThumbDownloaded()
  this.checkTownDownloaded()
}


downloadThumb(element) {
  console.log(element)
  return new Promise((resolve, reject) => {
    RNFetchBlob.config({
    // add this option that makes response data to be stored as a file,
    // this is much more performant.
    fileCache: true,
    path: `${DocumentDirectoryPath}/thumbs/${element}`
  })
    .fetch(
      'GET',
      `https://www.searchforsites.co.uk/app/images/default/${element}`,
      {
        // some headers ..
      }
    )
    .then(res => {
      resolve(true)
    })
    .catch(err => {
      // console.log('Error: ', err);
      // this.setState({ modalOpen: false, regionUpdated: true });
      // this.findUser();
      reject(true)
    })
})
}

如果我们可以使用线程，那将是一次很好的体验。下载整个数据需要15分钟。

有没有天才的解决方案？

感谢您的关注。

Answer 1

如果您的应用程序的前端不需要同时显示所有图像，那么请尝试重新设计应用程序以延迟加载图像以获得更好的性能。

See the React Lazy Load npm package here
This blog post walks through an example.

延迟加载肯定有助于提高性能/加载时间。

另外值得考虑的是，您可能需要重新设计应用程序和模板结构，以限制每页显示的图像数量。也许该页面可以具有无限滚动行为，其他图像通过Ajax批量加载，而不是所有的前期。

Answer 2

解决方案1：考虑为什么，如果一次需要30.000张图像。这听起来像是一个糟糕的设计选择。

解决方案2：将它们放在zip文件中，然后解压缩该文件：Any way to unzip file on react-native

解决方案2的问题在于我不太确定它会起作用，因为你要添加很多RN解析器不知道的图像。

Javascript提高了下载速度

2 个答案: