使用TypeScript+Expo+React Native时的文件夹结构错误求助

核心原因 #

Expo 默认入口文件node_modules/expo/AppEntry.js会从项目根目录查找App.tsx（或App.js），但你将App.tsx移到了src文件夹下，导致路径解析失败。

解决方案 #

方案1：创建根目录入口文件（推荐） #

在项目根目录新建index.tsx文件，内容如下：

import App from './src/App';
export default App;

修改项目根目录的package.json，将main字段改为"index.tsx"：

{
  "main": "index.tsx",
  // 保留原有其他配置
}

Expo会从该入口启动，正确导入src文件夹下的App.tsx。

方案2：直接修改入口指向 #

无需额外创建文件，直接修改package.json的main字段指向src/App.tsx：

{
  "main": "src/App.tsx",
  // 保留原有其他配置
}

额外：确保@app/*路径别名生效（可选） #

若要使用@app/*的路径别名导入文件，需配置Metro支持：

1. 在项目根目录新建metro.config.js：

const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');

const config = getDefaultConfig(__dirname);

config.resolver.alias = {
  ...config.resolver.alias,
  '@app': path.resolve(__dirname, 'src'),
};

module.exports = config;

2. 执行expo start --clear重启开发服务器，让配置生效。

验证 #

完成配置后，执行expo start --clear重启开发服务器，重新打包即可解决路径解析错误。

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