主要改动: 1. 创建乐观更新工具函数 (optimisticUpdate.ts) - 消除 userStore.ts 中的重复代码 2. 拆分 useResponsive.ts (485行 -> 12个专注模块) - useBreakpoint: 断点检测 - useOrientation: 方向检测 - usePlatform: 平台检测 - useScreenSize: 屏幕尺寸 - useResponsiveValue: 响应式值 - useResponsiveStyle: 响应式样式 - useMediaQuery: 媒体查询 - useColumnCount: 列数计算 - useResponsiveSpacing: 响应式间距 3. 整理数据层 (Repository 层) - ApiDataSource: API数据源 - LocalDataSource: 本地数据源 - CacheDataSource: 缓存数据源 - MessageRepository: 消息仓库 4. 重构 messageManager.ts (2194行 -> 4个模块) - MessageStateManager: 状态管理 - WebSocketMessageHandler: WebSocket处理 - MessageSyncService: 消息同步 - ReadReceiptManager: 已读管理 5. 导航解耦 (MainNavigator.tsx: 1118行 -> 100行) - 创建 NavigationService 解耦层 - 拆分多个 Navigator 组件 架构改进: - 单一职责原则: 每个模块职责明确 - 依赖倒置: 通过接口解耦 - 代码复用: 工具函数可被多处使用 - 可测试性: 各模块可独立测试
101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
/**
|
|
* 主导航组件(重构版)
|
|
*
|
|
* 此文件仅保留导航器组装逻辑,所有业务逻辑已解耦至:
|
|
* - RootNavigator: 处理根导航和认证状态
|
|
* - DesktopNavigator: 处理桌面端侧边栏导航
|
|
* - SimpleMobileTabNavigator: 处理移动端 Tab 导航
|
|
* - navigationService: 提供全局导航方法
|
|
*
|
|
* 原文件 1118 行已精简至约 200 行
|
|
*/
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { LinkingOptions } from '@react-navigation/native';
|
|
import { Platform } from 'react-native';
|
|
|
|
import type { RootStackParamList } from './types';
|
|
import { RootNavigator } from './RootNavigator';
|
|
|
|
// 导入认证 Store
|
|
import { useAuthStore } from '../stores';
|
|
|
|
// Deep linking 配置
|
|
const linking: LinkingOptions<RootStackParamList> = {
|
|
prefixes: [],
|
|
config: {
|
|
screens: {
|
|
Auth: {
|
|
screens: {
|
|
Login: 'login',
|
|
Register: 'register',
|
|
ForgotPassword: 'forgot-password',
|
|
},
|
|
},
|
|
Main: {
|
|
screens: {
|
|
HomeTab: {
|
|
screens: {
|
|
Home: 'home',
|
|
Search: 'search',
|
|
},
|
|
},
|
|
MessageTab: {
|
|
screens: {
|
|
MessageList: 'messages',
|
|
Notifications: 'notifications',
|
|
},
|
|
},
|
|
ProfileTab: {
|
|
screens: {
|
|
Profile: 'me',
|
|
Settings: 'settings',
|
|
EditProfile: 'me/edit',
|
|
AccountSecurity: 'me/security',
|
|
NotificationSettings: 'me/notifications',
|
|
BlockedUsers: 'me/blocked',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
PostDetail: 'posts/:postId',
|
|
UserProfile: 'users/:userId',
|
|
CreatePost: 'posts/create',
|
|
Chat: 'chat/:conversationId',
|
|
FollowList: 'users/:userId/:type',
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* 主导航组件
|
|
*
|
|
* 职责:
|
|
* 1. 初始化认证状态
|
|
* 2. 根据认证状态渲染 RootNavigator
|
|
* 3. 配置 Deep Linking
|
|
*/
|
|
export default function MainNavigator() {
|
|
const { isAuthenticated, fetchCurrentUser } = useAuthStore();
|
|
const [isInitializing, setIsInitializing] = useState(true);
|
|
|
|
// 初始化认证状态
|
|
useEffect(() => {
|
|
const initAuth = async () => {
|
|
await fetchCurrentUser();
|
|
setIsInitializing(false);
|
|
};
|
|
initAuth();
|
|
}, [fetchCurrentUser]);
|
|
|
|
return (
|
|
<RootNavigator
|
|
isAuthenticated={isAuthenticated}
|
|
isInitializing={isInitializing}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// 导出 linking 配置供外部使用
|
|
export { linking };
|