React Native Expo资源/图片预加载：如何正确引入预加载图片？

你当前的核心问题是：预加载完图片后，组件里还是用require重新引入资源，等于绕开了预加载的结果，又发起了一次新的加载请求。下面是具体的修复方案：

步骤1：保存预加载的资源引用 #

在App组件里，把Asset.loadAsync返回的资源对象存到state里，方便后续传递给子组件：

import { useState, useEffect } from 'react';
import { Asset, Font, Text } from 'expo';
import MontserratReg from '../path/to/MontserratReg.ttf';
import SomeComponent from './SomeComponent';

export default function App() {
    const [appIsReady, setAppIsReady] = useState(false);
    const [preloadedAssets, setPreloadedAssets] = useState({});

    useEffect(() => {
        async function prepare() {
            try {
                const [, assetResults] = await Promise.all([
                    Font.loadAsync({
                        'MontserratReg': MontserratReg,
                        // 其他字体...
                    }),
                    Asset.loadAsync([
                        require('../assets/images/logo.jpeg')
                    ])
                ]);
                // 保存预加载的图片资源（数组第一个元素就是我们要的logo）
                setPreloadedAssets({
                    logo: assetResults[0]
                });
            } catch (e) {
                console.warn(e);
            } finally {
                setAppIsReady(true);
            }
        }
        prepare();
    }, []);

    // 未加载完成时显示加载状态（比如启动屏）
    if (!appIsReady) {
        return <Text>加载中...</Text>;
    }

    return (
        <SomeComponent logoAsset={preloadedAssets.logo} />
    );
};

步骤2：在子组件中使用预加载的资源 #

直接通过props接收预加载好的资源对象，作为ImageBackground的source：

import { ImageBackground } from 'react-native';

const SomeComponent = ({ logoAsset }) => {
    return (
        <ImageBackground
            source={logoAsset} // 直接用预加载的资源，不要重新require
            resizeMode="cover"
            style={{ flex: 1 }} // 必须加样式确保容器可见
        >
            {/* 这里放你的组件内容 */}
        </ImageBackground>
    )
}

export default SomeComponent;

额外排查点 #

• 路径一致性：检查App组件和子组件中图片的require路径是否完全一致（比如../assets和../../assets是不同路径），路径不同会被判定为两个独立资源，预加载的资源不会被复用。
• 启动屏控制：如果是App启动时的延迟，建议配合expo-splash-screen保持启动屏显示直到所有资源加载完成，避免用户看到空白或加载延迟。

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