使用Expo Assets预加载图片仍出现背景闪烁问题求助

问题场景 #

已在RootLayout渲染前通过Expo的Asset API预加载图片，但AuthLayout中的ImageBackground组件仍会出现用于调试的红色背景闪烁现象。

RootLayout代码 #

function RootLayout() {
  const colorScheme = useColorScheme();
  const { user, userLoading } = useAuth();
  const { languageLoading, getStoredLanguage } = useLanguage();
  const { cityLoading, getStoredCity } = useCity();
  const [assetsLoading, setAssetsLoading] = useState(true);

  useEffect(() => {
    const loadAssets = async () => {
      try {
        await Asset.loadAsync([require("./assets/images/onboard.jpg")]);
      } catch (error) {
        console.error(error);
      } finally {
        setAssetsLoading(false);
      }
    };
    loadAssets();
  }, []);

  function initializeLayout() {
    Promise.all([getStoredLanguage(), getStoredCity()]).catch((error) => {
      console.log(error);
    });
  }

  useEffect(() => {
    initializeLayout();
  }, []);

  if (userLoading || languageLoading || cityLoading || assetsLoading) {
    return <Splash />;
  }

  return (
    <NavigationContainer theme={colorScheme === "light" ? DefaultTheme : DarkTheme}>
      {user ? <SignedInLayout /> : <AuthLayout />}
    </NavigationContainer>
  );
}

AuthLayout中相关代码 #

return (
    <View style={{ flex: 1, paddingBottom: insets.bottom }}>
      <ImageBackground
        source={require("../../../assets/images/onboard.jpg")}
        style={{ flex: 1, backgroundColor: "red" }}
        contentFit="cover"
      />
      {/* 其他组件 */}
    </View>
);

问题原因 #

预加载的图片资源路径与实际使用的路径不一致：RootLayout中使用./assets/images/onboard.jpg，而AuthLayout中使用../../../assets/images/onboard.jpg。Expo会将不同路径引用的同一图片视为两个独立资源，预加载的资源并未被实际渲染的组件复用，导致图片仍需重新加载，从而出现红色背景闪烁。

解决方法 #

1. 统一资源引用方式 #

在项目根目录的assets文件夹下创建index.js文件，统一导出所有图片资源：

// assets/index.js
export const onboardImage = require('./images/onboard.jpg');

然后在所有需要使用该图片的组件中统一导入：

• RootLayout中的预加载代码修改为：

  await Asset.loadAsync([onboardImage]);
  

• AuthLayout中的ImageBackground修改为：

  <ImageBackground
    source={onboardImage}
    style={{ flex: 1, backgroundColor: "red" }}
    contentFit="cover"
  />
  

2. 确保预加载完成后再渲染主布局 #

确认assetsLoading状态只有在Asset.loadAsync完全完成后才会设为false，避免Splash提前隐藏导致主布局在图片未就绪时渲染。

3. 可选优化 #

在Splash组件中添加与ImageBackground尺寸、样式一致的占位图，进一步减少视觉切换的断层感。

内容的提问来源于stack exchange，提问作者David Henry