refactor(App, navigation): migrate to Expo Router and clean up navigation structure
- Updated App entry point to utilize Expo Router, simplifying the navigation setup. - Removed legacy navigation components and services to streamline the codebase. - Adjusted package.json to reflect the new entry point and updated dependencies for compatibility. - Enhanced overall application structure by consolidating navigation logic and improving maintainability.
This commit is contained in:
@@ -1,60 +0,0 @@
|
||||
/**
|
||||
* 导航状态管理 Hook
|
||||
* 管理导航相关状态,如当前路由、导航历史等
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import { useNavigationState as useRNNavigationState, Route } from '@react-navigation/native';
|
||||
import type { RootStackParamList } from '../../../navigation/types';
|
||||
|
||||
type TabName = 'HomeTab' | 'MessageTab' | 'ScheduleTab' | 'ProfileTab';
|
||||
|
||||
interface NavigationState {
|
||||
currentTab: TabName;
|
||||
isCollapsed: boolean;
|
||||
isReady: boolean;
|
||||
}
|
||||
|
||||
interface NavigationActions {
|
||||
setCurrentTab: (tab: TabName) => void;
|
||||
toggleCollapse: () => void;
|
||||
setIsReady: (ready: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航状态管理 Hook
|
||||
*/
|
||||
export function useNavigationState(): NavigationState & NavigationActions {
|
||||
const [currentTab, setCurrentTab] = useState<TabName>('HomeTab');
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
|
||||
const toggleCollapse = useCallback(() => {
|
||||
setIsCollapsed(prev => !prev);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
currentTab,
|
||||
isCollapsed,
|
||||
isReady,
|
||||
setCurrentTab,
|
||||
toggleCollapse,
|
||||
setIsReady,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前路由名称
|
||||
*/
|
||||
export function useCurrentRouteName(): string | null {
|
||||
const routeName = useRNNavigationState(state => state?.routes[state.index]?.name ?? null);
|
||||
return routeName;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查是否在指定路由
|
||||
*/
|
||||
export function useIsRoute(routeName: keyof RootStackParamList): boolean {
|
||||
const currentRoute = useCurrentRouteName();
|
||||
return currentRoute === routeName;
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
/**
|
||||
* 导航服务层
|
||||
* 提供全局导航功能,解耦组件与导航状态的直接依赖
|
||||
*/
|
||||
|
||||
import { NavigationContainerRef, Route } from '@react-navigation/native';
|
||||
|
||||
class NavigationService {
|
||||
private navigationRef: NavigationContainerRef<any> | null = null;
|
||||
private isReady: boolean = false;
|
||||
|
||||
/**
|
||||
* 设置导航引用
|
||||
*/
|
||||
setNavigationRef(ref: NavigationContainerRef<any> | null): void {
|
||||
this.navigationRef = ref;
|
||||
this.isReady = ref !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查导航是否就绪
|
||||
*/
|
||||
isNavigationReady(): boolean {
|
||||
return this.isReady && this.navigationRef !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航到指定路由
|
||||
*/
|
||||
navigate(routeName: string, params?: any): void {
|
||||
if (!this.isNavigationReady()) {
|
||||
console.warn('[NavigationService] Navigation not ready');
|
||||
return;
|
||||
}
|
||||
this.navigationRef!.navigate(routeName as any, params);
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回上一页
|
||||
*/
|
||||
goBack(): void {
|
||||
if (!this.isNavigationReady()) {
|
||||
console.warn('[NavigationService] Navigation not ready');
|
||||
return;
|
||||
}
|
||||
this.navigationRef!.goBack();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前路由
|
||||
*/
|
||||
getCurrentRoute(): Route<string> | null {
|
||||
if (!this.isNavigationReady()) {
|
||||
return null;
|
||||
}
|
||||
return this.navigationRef!.getCurrentRoute() ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前路由名称
|
||||
*/
|
||||
getCurrentRouteName(): string | null {
|
||||
const route = this.getCurrentRoute();
|
||||
return route?.name ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置导航到指定路由
|
||||
*/
|
||||
reset(routes: { name: string; params?: any }[], index: number = 0): void {
|
||||
if (!this.isNavigationReady()) {
|
||||
console.warn('[NavigationService] Navigation not ready');
|
||||
return;
|
||||
}
|
||||
this.navigationRef!.reset({
|
||||
index,
|
||||
routes: routes.map(r => ({ name: r.name, params: r.params })),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 替换当前路由
|
||||
*/
|
||||
replace(routeName: string, params?: any): void {
|
||||
if (!this.isNavigationReady()) {
|
||||
console.warn('[NavigationService] Navigation not ready');
|
||||
return;
|
||||
}
|
||||
this.navigationRef!.dispatch({
|
||||
type: 'REPLACE',
|
||||
payload: { name: routeName, params },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航到根路由
|
||||
*/
|
||||
navigateToRoot(): void {
|
||||
this.reset([{ name: 'Main' }]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航到认证页面
|
||||
*/
|
||||
navigateToAuth(): void {
|
||||
this.reset([{ name: 'Auth' }]);
|
||||
}
|
||||
}
|
||||
|
||||
export const navigationService = new NavigationService();
|
||||
@@ -1,58 +0,0 @@
|
||||
/**
|
||||
* 导航基础设施类型定义
|
||||
*/
|
||||
|
||||
import { NavigationContainerRef, Route } from '@react-navigation/native';
|
||||
import type {
|
||||
RootStackParamList,
|
||||
MainTabParamList,
|
||||
HomeStackParamList,
|
||||
MessageStackParamList,
|
||||
ScheduleStackParamList,
|
||||
ProfileStackParamList,
|
||||
AuthStackParamList,
|
||||
} from '../../navigation/types';
|
||||
|
||||
// ==================== 导航服务类型 ====================
|
||||
export interface NavigationServiceInterface {
|
||||
setNavigationRef(ref: NavigationContainerRef<any> | null): void;
|
||||
isNavigationReady(): boolean;
|
||||
navigate(routeName: string, params?: any): void;
|
||||
goBack(): void;
|
||||
getCurrentRoute(): Route<string> | null;
|
||||
getCurrentRouteName(): string | null;
|
||||
reset(routes: { name: string; params?: any }[], index?: number): void;
|
||||
replace(routeName: string, params?: any): void;
|
||||
navigateToRoot(): void;
|
||||
navigateToAuth(): void;
|
||||
}
|
||||
|
||||
// ==================== Tab 类型 ====================
|
||||
export type TabName = 'HomeTab' | 'MessageTab' | 'ScheduleTab' | 'ProfileTab';
|
||||
|
||||
export interface NavItemConfig {
|
||||
name: TabName;
|
||||
label: string;
|
||||
icon: string;
|
||||
iconOutline: string;
|
||||
}
|
||||
|
||||
// ==================== 导航配置常量 ====================
|
||||
export const NAVIGATION_CONSTANTS = {
|
||||
SIDEBAR_WIDTH_DESKTOP: 240,
|
||||
SIDEBAR_WIDTH_TABLET: 200,
|
||||
SIDEBAR_COLLAPSED_WIDTH: 72,
|
||||
MOBILE_TAB_FLOATING_MARGIN: 12,
|
||||
LAST_ACTIVE_TAB_KEY: 'last_active_tab',
|
||||
} as const;
|
||||
|
||||
// ==================== 重新导出导航类型 ====================
|
||||
export type {
|
||||
RootStackParamList,
|
||||
MainTabParamList,
|
||||
HomeStackParamList,
|
||||
MessageStackParamList,
|
||||
ScheduleStackParamList,
|
||||
ProfileStackParamList,
|
||||
AuthStackParamList,
|
||||
};
|
||||
Reference in New Issue
Block a user