应用端实验室移动应用
00 / 00

项目结构

理解 01MVP mobile app 在 products/01mvp 中的位置

你将学到

  • 移动端在 monorepo 中的位置和它与 Web 的关系
  • app/src/screens/src/lib/src/ui/ 各自的职责
  • 移动端能共享什么、不能碰什么
  • 新增功能时代码应该放哪里
  • 业务扩展时推荐的 feature 目录结构

移动端代码在 products/01mvp/apps/mobile。和 Web 端同属 products/01mvp,但 UI、导航和原生配置各自独立维护。

products/01mvp/
  apps/
    web/       TanStack Start Web/API
    mobile/    Expo iOS / Android App
  packages/
    api/       oRPC router 与跨端 API client
    auth/      Better Auth server 配置
    config/    01MVP 产品配置
    db/        数据库 schema 与迁移

移动端最容易犯的错,是把它当成一个新的全栈项目。其实它只是 01MVP 产品的另一个客户端:拿公开配置启动,调用现有 API,不直接碰数据库,不复制 Web 后台。

mobile app 内部结构

products/01mvp/apps/mobile/
  app/             Expo Router 路由入口
  src/config/      移动端公开环境变量解析
  src/lib/         auth、API、RevenueCat 客户端
  src/providers/   React Query、HeroUI Native、Safe Area
  src/screens/     页面级 UI
  src/ui/          App 内复用 UI primitives
  app.json         Expo 原生配置
  eas.json         EAS Build / Submit profiles

每个目录管什么

app/ — 路由入口、layout、页面文件。保持薄,大段业务 UI 和复杂数据逻辑不要放这里。

src/screens/ — 页面级 UI,例如登录页、首页、会员页。不要放跨端共享的 API 类型或数据库 schema。

src/lib/ — App 侧客户端工具,例如 auth client、oRPC client、RevenueCat。不要放服务端密钥、数据库连接或 Cloudflare 运行时代码。

src/ui/ — 移动端复用组件和视觉 primitives。不要放 Web shadcn 组件或 admin 页面组件。

app.json / eas.json — App 身份、原生插件、EAS 构建和提交 profile。不要放任何服务端 secret 或私钥。

共享边界

移动端和 Web 端通过 packages/ 共享一部分代码,但有一条清晰的线:

  • 移动端用 @01mvp/api/client/mobile/orpc 调 API
  • 移动端不要用 @01mvp/api/client/tanstack-start/orpc,那个入口只给 Web/TanStack Start 用
  • Better Auth server 配置仍在 @01mvp/auth/index
  • 移动端只读 EXPO_PUBLIC_*,服务端密钥继续放在 products/01mvp/packages/config/.env 或部署平台 secrets

新增功能怎么放

功能推荐位置说明
一个新页面app/ + src/screens/route 文件保持薄,UI 放到 screen
App 内小组件src/ui/只给 mobile 使用,不要塞进 packages/ui
请求某个业务 APIsrc/lib/ 或 screen-local helper通过 @01mvp/api/client/mobile/orpc 调用
Web 和 App 都要用的类型products/01mvp/packages/api 或更合适的产品包先确认真的跨端复用
原生能力配置app.json、Expo plugin、对应 screen/lib改完要做 development build
发布环境变量eas.json profile 或 EAS 环境只放 EXPO_PUBLIC_* 公开值

推荐的业务扩展结构

真实产品可以在 src 里增加 feature 目录,但不要一开始就过度抽象。

src/
  features/
    notes/
      notes-screen.tsx
      notes-list.tsx
      notes-api.ts
    billing/
      paywall-screen.tsx
      revenuecat-status.ts
  screens/
    home-screen.tsx
    sign-in-screen.tsx
  ui/
    mobile-button.tsx
    empty-state.tsx

如果一个 feature 只服务一个页面,可以先放在 src/screens 附近。等它开始被多个页面复用,再移进 src/features/<name>

模板质量标准

移动端模板应该保持小而完整:新用户能按文档改 App 名称、Bundle ID、scheme 和 EAS profile;App 能登录、能调用公开 API、能调用受保护 API;付费 SDK 能配置,未配置时有明确空状态;构建脚本能跑,不依赖本地未提交密钥。

具体业务产品可以在此基础上添加自己的功能模块。

下一步

结构清楚了,接下来了解配置细节:配置

想和其他创造者交流?

这篇文档有问题?