在导航到组件之前预紧图像

Question

这更像是一个概念性问题，但我不确定解决它的确切方法。

我有一个要从中下载图像的组件，但是我希望能够指示在用户可以使用路由器通量切换到它之前加载组件。

我猜这是我在redux中必须完成的事情，这是正确的主意吗？我一直在尝试找到一个可以执行此操作的React本机应用的示例。

非常感谢！

Answer 1

rn图像组件处理这种情况的特定静态方法：https：//facebook.github.io/reaect-native/docs/image.html#prefeth

注意：Image.prefetch返回承诺

以下是如何使用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一起使用，将上述代码放入操作中，并确保您的还原器对操作做出响应，并根据您的应用程序要求设置新状态。