React Native+TypeScript项目图片导入报错解决方法咨询

一、快速修复当前报错 #

1. 确认路径别名配置 #

如果用了@/这类别名，得确保TypeScript和Babel都正确配置：

• 在tsconfig.json里添加路径映射：

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

• 要是Expo项目，还得在babel.config.js里配置module-resolver插件：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: [
        [
          'module-resolver',
          {
            root: ['./src'],
            alias: { '@': './src' }
          }
        ]
      ]
    };
  };
  

2. 添加图片类型声明 #

TypeScript不认识图片这类非代码文件，得给它加类型声明：

• 在项目根目录或src下创建declarations.d.ts文件，写入：

  // 图片类型声明
  declare module '*.png' {
    const value: number; // React Native中图片导入后是资源ID（number类型）
    export default value;
  }
  
  // 按需扩展其他格式
  declare module '*.jpg';
  declare module '*.jpeg';
  declare module '*.gif';
  

• 确保tsconfig.json的include字段包含这个声明文件，比如：

  "include": ["src/**/*", "declarations.d.ts"]
  

二、TypeScript项目静态资源规范处理 #

• 统一资源目录：把所有图片、字体等静态资源放到src/assets下，用@/assets/xxx引用，避免相对路径混乱
• 集中管理类型声明：把所有静态资源的类型声明（比如图片、SVG、字体）都放到同一个.d.ts文件里，方便维护
• SVG特殊处理：如果用SVG，建议搭配react-native-svg库，同时添加对应的类型声明：

  declare module '*.svg' {
    import React from 'react';
    import { SvgProps } from 'react-native-svg';
    const content: React.FC<SvgProps>;
    export default content;
  }
  

• 资源统一导出：可以建一个src/assets/index.ts文件，把所有图片导入后统一导出，方便项目中引用：

  import Logo from '@/assets/logo.png';
  import Banner from '@/assets/banner.jpg';
  
  export const Assets = {
    Logo,
    Banner
  };
  

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