React Native iOS开发导入screens组件报错，求解决方案

AI 小北

2026-7-4

React Native导入screens组件时模块解析错误的解决方法

问题分析

你遇到的Unable to resolve module screens/Top错误，本质是模块解析器无法正确映射screens/Top到项目中的src/screens/Top.tsx文件。从配置和代码来看，主要存在以下几个问题：

Babel模块解析器的别名配置未覆盖screens路径
TypeScript配置存在语法错误
Metro缓存残留导致解析规则未更新
Top组件的导入语句错误

具体解决步骤

1. 修复babel.config.js的模块解析配置

在babel-plugin-module-resolver的alias中添加screens的映射，确保解析器能定位到src/screens目录：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          tests: ['./tests/'],
          '@components': './src/components',
          screens: './src/screens' // 新增screens路径映射
        },
      },
    ],
  ],
};

2. 修正tsconfig.json的语法错误

你的tsconfig中paths里最后一项末尾多了一个无效逗号，会导致TypeScript解析失败，移除后配置如下：

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"],
      "tests": ["tests/*"],
      "@components/*": ["src/components/*"] // 移除末尾多余逗号
    }
  }
}

3. 清除Metro缓存

Metro缓存可能残留旧的解析规则，执行以下命令重置缓存：

npx react-native start --reset-cache

重置完成后重新启动项目即可。

4. 修复Top.tsx的组件导入错误

你在Top.tsx中错误地从react-native/types导入组件，这里应该直接从react-native导入UI组件：

import React from 'react';
import {ScrollView, Text} from 'react-native'; // 修正导入路径

function Top(): React.JSX.Element {
  return (
    <ScrollView>
      <Text>Test</Text>
    </ScrollView>
  );
}

export default Top;