项目结构
理解 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 |
| 请求某个业务 API | src/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 能配置,未配置时有明确空状态;构建脚本能跑,不依赖本地未提交密钥。
具体业务产品可以在此基础上添加自己的功能模块。
下一步
结构清楚了,接下来了解配置细节:配置
想和其他创造者交流?
这篇文档有问题?