在render（）之前加载图像

Question

我使用RNFetchBlob下载图像，视频，徽标和pdf。如果有视频，我使用视频，如果视频不存在但背景是，我使用背景。

虽然我的应用程序在我的配置.js中，但它会异步下载所有资产并设置我的应用程序。

这是我用来将我的资产保存到窗口/全局变量的代码，以便在我的应用程序的所有屏幕上调用。

let dirs = RNFetchBlob.fs.dirs;
RNFetchBlob.fs.ls(dirs.DocumentDir)
        .then( (files) => {
          for(var i = 0; i < files.length; i++) {
            let fileName = files[i].split('.');

            if(fileName[0] === 'background') {
              window.local_background = dirs.DocumentDir + '/' + files[i];
              continue;
            }

            if(fileName[0] === 'video') {
              window.local_video = dirs.DocumentDir + '/' + files[i];
              continue;
            }

            if(fileName[0] === 'logo') {
              window.local_logo = dirs.DocumentDir + '/' + files[i];
              continue;
            }
          }

          this.props.navigation.replace('Main');
        })

当我使用react-navigation在屏幕之间导航时，我使用通用的<Image/>组件，其中源设置为source={{uri: window.local_background}}但我的问题是当我导航屏幕时，当我导航到尚未进入堆栈的新屏幕时，我将看到白色闪光。如何加速/预加载它以便在所有其他内容都已呈现后不会开始加载？

有没有更好的方法在整个应用程序中使用全局背景？

我的背景来自服务器，无法在应用程序的构建中本地存储。

Answer 1

React Native上的图像缓存并不像它那样伟大。经过多次搜索，我发现使用react-native-fast-image非常适合图像缓存和显示从网上下载的图像。你可以找到repo here。

它很容易使用它基本上取代了Image提供的react-native组件。

设置很简单（请注意，此套餐不适用于世博会）

您可以通过以下方式安装它

# Install
yarn add react-native-fast-image
npm install react-native-fast-image

# Automatic linking. (other linking methods listed on their website)
react-native link react-native-fast-image

以下是使用它的示例：

import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style={styles.image}
        source={{
            uri: 'https://unsplash.it/400/400?image=1',
            headers: { Authorization: 'someAuthToken' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)

每当需要从网络上加载任何图像时，我基本上都会使用它。