---

name: project-setup-architecture description: 设置项目基础设施，包括TypeScript、数据库、状态管理、导航和测试。在初始化新功能或配置开发环境时使用。 allowed-tools: Bash, Read, Write, Edit, Glob

项目设置与架构

React Native/Expo项目基础设施设置指南。

何时使用

• 初始化TypeScript配置
• 设置数据库层
• 配置状态管理
• 安装和配置测试
• 创建目录结构
• 添加代码检查和格式化

设置工作流

TypeScript设置

# 安装TypeScript
npm install --save-dev typescript @types/react @types/react-native

# 创建tsconfig.json
npx tsc --init

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "jsx": "react-native"
  }
}

目录结构

# 创建功能切片架构
mkdir -p src/{app,features,shared,db,theme}
mkdir -p src/shared/{components,hooks,utils,types}

数据库设置 (SQLite + Drizzle)

# 安装依赖
npx expo install expo-sqlite
npm install drizzle-orm
npm install --save-dev drizzle-kit

# 创建结构
mkdir -p src/db/{schema,migrations}

// src/db/client.ts
import * as SQLite from 'expo-sqlite';
import { drizzle } from 'drizzle-orm/expo-sqlite';

const db = SQLite.openDatabaseSync('app.db');
export const drizzle = drizzle(db);

状态管理 (Zustand)

npm install zustand

// src/shared/stores/useAppStore.ts
import { create } from 'zustand';

interface AppState {
  count: number;
  increment: () => void;
}

export const useAppStore = create<AppState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

测试设置

npm install --save-dev jest @testing-library/react-native

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

代码检查与格式化

npm install --save-dev eslint prettier
npx eslint --init

配置文件

app.json (Expo配置)

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",
    "platforms": ["ios", "android"],
    "ios": {
      "bundleIdentifier": "com.company.myapp"
    },
    "android": {
      "package": "com.company.myapp"
    }
  }
}

package.json 脚本

{
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "test": "jest",
    "lint": "eslint src/",
    "type-check": "tsc --noEmit"
  }
}

最佳实践

1. 增量设置：一次安装和配置一个系统
2. 验证安装：在继续下一步之前测试每个设置
3. 检查依赖：确保与Expo SDK兼容
4. 使用Expo安装：对于Expo包，使用npx expo install
5. 版本控制：在每个成功的设置步骤后提交

常见任务

添加新依赖

# 检查是否是Expo SDK包
npx expo install package-name

# 否则使用npm
npm install package-name

创建新功能模块

mkdir -p src/features/my-feature/{components,hooks,services,types}
touch src/features/my-feature/index.ts

生成数据库迁移

npx drizzle-kit generate:sqlite
npx drizzle-kit push:sqlite

验证清单

设置后，验证：

• [ ] TypeScript编译无错误 (npx tsc --noEmit)
• [ ] 应用在iOS和Android上运行
• [ ] 测试成功运行 (npm test)
• [ ] 代码检查通过 (npm run lint)
• [ ] 数据库连接和查询工作正常
• [ ] 状态管理功能正常

资源

• Expo配置
• TypeScript与Expo