React Native无法读取assets文件夹图片的问题求助

我在src/assets文件夹中存放了一张背景图片，尝试从src/screens/splash/index.js中通过以下代码调用：

import {ImageBackground} from 'react-native';
import React from 'react';

export default function SplashScreen() {
  return (
    <ImageBackground
      source={require('../../assets/bg1.jpg')}
      resizeMode={'cover'}
      style={{flex: 1}}>
    </ImageBackground>
  );
}

但出现如下错误提示：

None of these files exist:

• bg1.jpg
• src\assets\bg1.jpg\index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

将图片移至screens等其他文件夹，并修改路径为source={require('../../screens/bg1.jpg')}后即可正常加载。想了解背后原因，是否与使用React Native CLI并将原本创建的tsx文件重命名为js有关？

核心原因：资源扫描配置遗漏 #

React Native的打包工具Metro默认会扫描业务代码文件夹（比如screens）下的资源文件，但assets这类自定义资源文件夹如果没被添加到Metro的扫描配置中，就会导致图片无法被打包工具识别，进而报错找不到文件。

和tsx重命名为js无关 #

代码文件从tsx改js不会影响Metro对资源文件的识别逻辑，资源文件的加载只和自身路径、Metro的资源扫描规则有关，和代码文件的扩展名没有关联。

解决办法 #

1. 修改Metro配置文件：在项目根目录的metro.config.js中，把src/assets加入扫描范围，并确保图片扩展名被纳入支持列表。示例配置：

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const path = require('path');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: ['jpg', 'png', 'svg'], // 确保包含你使用的图片格式
  },
  watchFolders: [path.resolve(__dirname, 'src/assets')],
});

2. 校验路径正确性：确认../../assets/bg1.jpg的相对路径无误，注意大小写差异（iOS/Android系统对文件名大小写敏感，Windows则不敏感）。
3. 清除缓存重试：执行npx react-native start --reset-cache命令，清除Metro的缓存后重启项目，避免缓存导致的路径识别异常。

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