React Native跨多级目录导入assets图片报模块找不到如何解决

这个报错由两个问题共同导致：

• TypeScript 默认没有对 .png 这类静态图片资源做模块类型声明，无法识别这类导入
• 手写多层相对路径容易算错层级，跨层级引用时路径出错概率极高，你当前写的../../../assets/Structure.png实际只回溯到src目录层级，和根目录下的assets文件夹还差一层回溯

之所以yarn start能正常运行，是因为构建工具（Webpack/Vite等）默认做了静态资源处理，部分场景下会自动补全路径查找逻辑，但TS层面的类型校验不通过就会抛出这个潜在错误。

1. 补全静态资源类型声明 #

在src目录下新建declaration.d.ts文件，添加以下代码，让TS识别各类图片资源的导入：

declare module '*.png' {
  const value: string;
  export default value;
}
declare module '*.jpg' {
  const value: string;
  export default value;
}
declare module '*.jpeg' {
  const value: string;
  export default value;
}
declare module '*.gif' {
  const value: string;
  export default value;
}
declare module '*.svg' {
  const value: string;
  export default value;
}

打开项目根目录的tsconfig.json，确认include配置覆盖了这个声明文件，示例配置：

{
  "include": ["src/**/*"]
}

这一步完成后，类型声明缺失的报错会直接消除。

2. 修复路径问题（推荐用别名替代多层相对路径） #

临时修复（不推荐长期用） #

算准层级写对相对路径即可，从src/pages/page1/index.tsx到根目录assets文件夹需要回溯4层，正确导入语句为：

import structure from "../../../../assets/Structure.png";

这种写法在后续调整目录层级时很容易再次出错，不建议长期使用。

一劳永逸方案：配置路径别名 #

不管你用的是Create React App还是Vite搭建的项目，都可以通过配置别名实现固定路径引用，不需要再数../的层数：

1. 首先在构建配置里添加别名映射：
   如果是Create React App项目，先安装@craco/craco依赖（执行命令yarn add -D @craco/craco），在根目录新建craco.config.js写入配置：

const path = require('path');
module.exports = {
  webpack: {
    alias: {
      '@assets': path.resolve(__dirname, 'assets')
    }
  }
}

同时修改package.json里的启动脚本，把react-scripts替换为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

如果是Vite项目，直接在vite.config.ts里添加别名配置即可：

import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, 'assets')
    }
  }
})

2. 打开tsconfig.json，在compilerOptions里添加路径映射配置，让TS识别别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["assets/*"]
    }
  }
}

3. 重启TS服务（VSCode用户可以按Ctrl+Shift+P调出命令面板，选择TypeScript: Restart TS Server），之后所有图片导入都可以用固定写法，完全不用考虑文件层级：

import structure from "@assets/Structure.png";

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