Expo React Native应用与FSD v2文件夹结构冲突解决方案咨询

核心思路 #

利用Expo Router优先读取src/app目录的特性，将路由专属目录移至src/app，把项目根目录完全留给FSD v2的标准结构，从根源解决文件夹冲突。

具体操作步骤 #

• 迁移Expo Router路由目录
  将原本位于项目根目录的app文件夹（若已存在）直接移动到src目录下，形成src/app结构。Expo Router会自动识别该目录作为路由根目录，不再读取根目录的app文件夹。
  示例：原/app/(tabs)/home.tsx → 迁移后/src/app/(tabs)/home.tsx

• 搭建FSD v2标准目录结构
  在项目根目录创建FSD的核心切片文件夹：

  • features/：存放业务特性相关代码
  • entities/：存放领域实体代码
  • shared/：存放跨项目/跨切片的通用代码（如UI组件、工具函数）
  • widgets/：存放可复用的组合型组件
  • pages/：FSD层面的页面容器（与Expo Router的路由页面区分开，可按需将其作为路由组件的上层容器）

• 配置路径别名（可选但推荐）
  在tsconfig.json或jsconfig.json中添加路径别名，简化FSD模块的导入路径，避免冗长的相对路径：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"],
        "@features/*": ["features/*"],
        "@entities/*": ["entities/*"],
        "@shared/*": ["shared/*"],
        "@widgets/*": ["widgets/*"]
      }
    }
  }
  

  配置后，在src/app的路由组件中可直接写import Button from '@shared/ui/button/Button';。

• 验证兼容性

  1. 启动Expo项目，确认src/app下的路由页面能正常访问
  2. 在路由组件中导入任意FSD模块（如@features/user-profile/ui/ProfileCard），验证组件渲染正常

注意事项 #

• 禁止在项目根目录创建app文件夹，防止与FSD结构冲突
• 迁移路由目录后，清理根目录残留的旧app文件夹及缓存文件
• 严格遵循FSD的切片隔离原则，每个切片内部保持ui/、model/、lib/等子结构，避免与路由逻辑混合

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