This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

顶层 src 目录

编辑页面

了解如何在你的 Expo Router 项目中使用顶层 src 目录。


使用 SDK 55 及更高版本的 默认模板 创建的项目已经包含一个顶层的 src 目录,其中包含 appcomponentsconstantshooks 目录,无需额外配置。

如果你使用的是 自定义模板 或一个不包含 src 目录的现有项目,请按照以下步骤进行设置。

使用顶层 src 目录

1

将你的 app 目录移动到 src/app

src
app
  _layout.tsx
  index.tsx
components
  button.tsx
package.json

2

tsconfig.json 文件中更新 TypeScript 路径别名,将其指向 src 目录,而不是根目录。如果你使用默认的 @/* 别名,请将其设置为 ./src/*

tsconfig.json
{ "compilerOptions": { "paths": { "@/*": ["./src/*"] } } }

这样可以在将你的 app 目录移动到 src 后,继续保持 @/ 导入正常工作。

3

重启你的开发服务器。

Terminal
npx expo start

# 或导出用于生产环境
npx expo export

注意

  • 配置文件(app.config.tsapp.jsonpackage.jsonmetro.config.jstsconfig.json)应保留在根目录中。
  • src/app 目录的优先级高于根目录中的 app 目录。如果同时存在这两个目录,则只会使用 src/app 目录。
  • public 目录应保留在根目录中。
  • 如果 src/app 目录存在,静态渲染将自动使用该目录。
  • 你可以考虑更新任何类型别名,将其指向 src 目录,而不是根目录。

自定义目录

你可以使用 Expo Router Config Plugin 危险地自定义根目录。下面的配置会将根目录更改为 src/routes,相对于项目根目录。

app.json
{ "plugins": [ [ "expo-router", { "root": "./src/routes" } ] ] }

这可能会导致意外行为。许多工具都假定根目录应为 appsrc/app。只有与 Expo CLI 完全相同版本的工具才会遵守该配置插件。