react-native – 在导航到组件之前预加载图像

发布时间：2020-12-15 20:15:11 所属栏目：百科来源：网络整理

导读：这更像是一个概念问题,但我不确定解决问题的确切方法. 我有一个我想从中下载图像的组件,但我希望能够在用户可以使用router flux切换到它之前指示组件已加载. 我猜这是我必须在redux中完成的事情,这是正确的想法吗？我一直在努力寻找一个做出反应的本机应用程

这更像是一个概念问题,但我不确定解决问题的确切方法.

我有一个我想从中下载图像的组件,但我希望能够在用户可以使用router flux切换到它之前指示组件已加载.

我猜这是我必须在redux中完成的事情,这是正确的想法吗？我一直在努力寻找一个做出反应的本机应用程序的例子.

非常感谢！

解决方法

RN Image组件处理这种情况的特定静态方法： https://facebook.github.io/react-native/docs/image.html#prefetch

注意：Image.prefetch返回Promise

下面是如何使用React Native Router Flux(RNRF)实现此功能的示例,而不使用Redux：

let urlOfImages = [https://...]

let preFetchTasks = []; 

urlOfImages.forEach((p)=>{
    preFetchTasks.push(Image.prefetch(p));
});

Promise.all(preFetchTasks).then((results)=>{
    let downloadedAll = true;
    results.forEach((result)=>{
        if(!result){
            //error occurred downloading a pic
            downloadedAll = false;
        }
    })

    if(downloadedAll){
        Actions.someScene({ downloadedPics: urlOfImages})
    }
})

然后在someScene组件中使用像往常一样的图像组件,图像将从本地磁盘缓存中获取,而不是远程：

<Image style={...} source={{uri: this.props.urlOfImages[0]}} />

另外请注意,如果您尝试从http而不是安全的https端点加载图像,则会出现问题：https://github.com/facebook/react-native/issues/8520

如果您想将它与Redux一起使用,请将上述代码放入Action中,并确保Reducer响应操作并根据您的应用程序要求设置新状态.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!