在 React-native 中使用图像背景更改页面时出现白色闪烁

Question

问题

我有一个堆栈导航器。当我从页面 A 切换到页面 B（使用相同的 ImageBackground 组件时，下一个屏幕会立即出现，但没有背景图像。大约 1 - 2 秒后才会出现。我使用背景图像（只是一个复杂的渐变react-native 无法做到这一点，因此我将其导出为应用程序上每个页面的图像）。所以我创建了一个名为 Container 的组件，它只使用传入的背景图像导出 ImageBackground。它看起来像这样：

const BackgroundImageContainer = styled.ImageBackground`
  justify-content: space-between;
  flex: 1;
`;

const Container = ({children}) => (
  <BackgroundImageContainer
    source={require('../assets/Background.png')}
    style={{flex: 1, width: null, height: null}}>
    {children}
  </BackgroundImageContainer>
);

我还有一个标签栏，当我切换到不同的标签时，屏幕“闪烁白色”，因为我看到白色背景一秒钟，然后它显示实际的背景图像。

我认为这与图像的加载时间有关（虽然它只有 160KB）。 如何在应用程序启动时加载此图像，然后“缓存”它以便“立即”供所有组件使用？

Answer 1

看看this，它应该可以帮助您解决图像缓存问题。

希望对您有所帮助！