首页 > 解决方案 > react native iOS中的照片下载太慢了

问题描述

我需要在 react native 中下载 1000 张照片以供离线使用。我使用适用于 android 的 RNFetchBlob 和适用于 iOS 的 RNFS 来下载所有照片。

对于安卓

       RNFetchBlob.config({
            path: `${Path.path}${fileName}.${type}`,
            fileCache: true
        }).fetch('GET', result, {})
        .progress((received, total) => {

        }).then(async res => {
            deletePhoto(id)
            console.log('downloaded', res)
        }).catch((error) => {
            downloadFile(fileName, result, type, id)
            console.log('error in file download', id)
        })

对于 iOS

        RNFS.downloadFile({
            fromUrl: result,
            toFile:`${Path.path}${fileName}.${type}`,
            background: true,
            connectionTimeout: 1000 * 10,
            readTimeout: 1000 * 10,
            discretionary: true,
            progressDivider: 1,
            progress: (res) => {
            // do progress
            }
        }).promise.then((result) => {
            console.log('downloaded', result)
        })
        .catch(error => {
            console.log('error in file download', error)
        })

问题

下载 800 个文件所需的时间是 android - 2-3 分钟取决于网络带宽,而iOS 20 分钟 我不知道我做错了什么。

任何帮助都会对我有用 提前谢谢

标签: iosreact-nativereact-native-fsrn-fetch-blob

解决方案


您没有写任何有关图像大小的信息。但是,如果您必须加载至少具有大量数据的大量图像,我建议您“重新考虑”您在应用程序中处理图像的策略。

如果您确实需要离线所有这些图像,那么加载这些图像的高峰只是在第一次 App-Startup 时。之后,您仅检查和同步自上次下载以来服务器上是否有新的、更改的或删除的图像。

  1. 在这种情况下,我建议将图像下载为块。这意味着...弄清楚用户希望看到的第一张图片是什么,并在第一个下载过程中加载它们。对于应该出现图像(但尚未加载)的所有其他位置,您会输出如下消息:“请稍候。初始化正在进行中”。然后你加载 - 仍然按优先级 - 逐步加载其他文件。
  2. 另一种解决方案可能是在服务器上使用文件大小/质量非常低的拇指,并首先将它们加载到应该出现图像的所有地方......然后在后台逐步加载图像。
  3. 如果您的图像没有太大变化,您可以考虑仍然将一些需要的图像捆绑到您的 APK 中。这会增加 APK 大小,但会为您的第一张图像提供一点启动(仅将其用作糟糕的解决方法。我不推荐这个!)

否则,如果您don't需要所有图像脱机,您可能会预加载图像,如果您进入屏幕(图像预期的位置)。

至少我建议重新考虑在您的应用程序中显示图像的策略。不要像 1998 年的网页那样行事 - 并在 page-init 加载所有图像!

您最好根据需要加载图像(延迟加载)。那里有一些组件。如果您以正确的方式实现它,即使是核心组件 -Komponent 也可以帮助您。

希望对您有所帮助。


推荐阅读