Question

如何在React Native中渲染之前加载图像

我使用地图。

我将自定义图像用作标记。

我想在加载地图（或渲染之前）之前加载标记图像

Answer 1

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

注意：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一起使用，请将上面的代码放入Action中，并确保您的reducer响应该Action并根据您的应用程序要求设置新状态。

资源：https://stackoverflow.com/a/42710306/6569224

反应本地预加载本地图像

1 个答案: