react native 目录结构实例

src/
├── modules/
│   ├── user/
│   │   ├── components/
│   │   ├── screens/
│   │   ├── services/
│   │   ├── hooks/
│   │   └── types/
│   ├── crm/
│   │   ├── components/
│   │   ├── screens/
│   │   ├── services/
│   │   └── hooks/
├── shared/
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   └── services/

这是一个模块化的目录结构设计，目的是提高代码的组织性、可维护性和可扩展性。让我详细解释每个目录的作用：

1. 顶层目录结构

CopyInsert
src/
├── modules/       # 业务模块
├── shared/        # 公共资源和工具

2. Modules 目录 (src/modules/)

CopyInsert
modules/
├── user/          # 用户模块
│   ├── components/    # 用户模块专属组件
│   ├── screens/       # 用户相关页面
│   ├── services/      # 用户相关服务
│   ├── hooks/         # 用户模块专属自定义Hooks
│   └── types/         # 用户模块类型定义
│
├── crm/           # CRM模块
│   ├── components/    # CRM模块专属组件
│   ├── screens/       # CRM相关页面
│   ├── services/      # CRM相关服务
│   └── hooks/         # CRM模块专属自定义Hooks

3. Shared 目录 (src/shared/)

CopyInsert
shared/
├── components/    # 通用组件（跨模块使用）
├── hooks/         # 通用自定义Hooks
├── utils/         # 通用工具函数
└── services/      # 通用服务（如网络请求、存储等）

详细解释

1. 模块化设计优势

• 职责分离：每个模块独立管理自己的组件、页面、服务
• 高内聚：相关功能聚集在一起
• 低耦合：模块之间依赖最小化
• 便于维护：易于定位和修改代码

2. Modules 目录详解

a. components/

• 存放特定模块的专属组件
• 只在该模块内使用
• 例子：

typescript
CopyInsert
// modules/crm/components/CrmEmployeeCard.tsx
const CrmEmployeeCard = ({ employee }) => {
  return (
    <View>
      <Text>{employee.name}</Text>
      <Text>{employee.department}</Text>
    </View>
  );
};

b. screens/

• 页面级组件
• 每个文件对应一个完整页面
• 例子：

typescript
CopyInsert
// modules/crm/screens/EmployeeDetailScreen.tsx
const EmployeeDetailScreen = ({ route }) => {
  const { employeeId } = route.params;
  const { employee, loading } = useEmployeeDetail(employeeId);

  return (
    <View>
      {loading ? <LoadingIndicator /> : <EmployeeDetails data={employee} />}
    </View>
  );
};

c. services/

• 业务逻辑服务
• 处理数据获取、转换
• 例子：

typescript
CopyInsert
// modules/crm/services/EmployeeService.ts
class EmployeeService {
  static async getEmployeeDetails(id: string) {
    const response = await apiClient.get(`/employees/${id}`);
    return response.data;
  }

  static formatEmployeeData(employee) {
    return {
      ...employee,
      fullName: `${employee.firstName} ${employee.lastName}`
    };
  }
}

d. hooks/

• 模块专属自定义Hooks
• 封装复杂逻辑
• 例子：

typescript
CopyInsert
// modules/crm/hooks/useEmployeeList.ts
function useEmployeeList() {
  const [employees, setEmployees] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchEmployees = useCallback(async () => {
    setLoading(true);
    try {
      const data = await EmployeeService.getEmployees();
      setEmployees(data);
    } finally {
      setLoading(false);
    }
  }, []);

  return { employees, loading, fetchEmployees };
}

e. types/

• 类型定义
• 增加类型安全
• 例子：

typescript
CopyInsert
// modules/crm/types/employee.ts
export interface Employee {
  id: string;
  name: string;
  department: string;
  email: string;
}

3. Shared 目录作用

a. components/

• 通用组件
• 可在多个模块复用
• 例子：Button, LoadingIndicator

b. hooks/

• 通用自定义Hooks
• 跨模块使用
• 例子：useDebounce, useNetwork

c. utils/

• 通用工具函数
• 例子：formatDate, validateEmail

d. services/

• 基础服务
• 网络请求、本地存储等
• 例子：ApiClient, StorageService

优势总结

1. 代码组织清晰
2. 模块解耦
3. 复用性高
4. 可测试性强
5. 便于协作开发

实施建议

1. 渐进式重构
2. 遵循单一职责原则
3. 保持目录结构一致
4. 使用类型系统（TypeScript）
5. 编写单元测试

这种架构适合中大型项目，可以根据项目实际情况灵活调整。