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

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

看看这个，它应该可以帮助你整理图像缓存。

希望这有帮助！