This commit is contained in:
Junhui Chen 2025-08-07 19:22:55 +08:00
parent fd5ea7f318
commit 827bf7b164
3 changed files with 17 additions and 53 deletions

View File

@ -1,3 +1,4 @@
import AskNavbar from '@/components/layout/ask';
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { requestNotificationPermission } from '@/components/owner/utils';
import TabBarBackground from '@/components/ui/TabBarBackground';
@ -186,18 +187,7 @@ export default function TabLayout() {
return (
<>
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
headerShown: false,
tabBarShowLabel: false,
tabBarStyle: {
position: 'absolute',
borderTopWidth: 0,
elevation: 0,
height: Platform.OS === 'ios' ? 90 : 70,
},
tabBarBackground: () => <TabBarBackground />,
}}
tabBar={props => <AskNavbar {...props} wsStatus={wsStatus} />}
>
{/* 落地页 */}
<Tabs.Screen

View File

@ -225,7 +225,7 @@ export default function HomeScreen() {
useEffect(() => {
setIsLoading(true);
checkAuthStatus(router, () => {
router.replace('/ask')
router.replace('/memo-list')
}, false).then(() => {
setIsLoading(false);
}).catch(() => {

View File

@ -3,8 +3,9 @@ import ChatNotInSvg from "@/assets/icons/svg/chatNotIn.svg";
import PersonInSvg from "@/assets/icons/svg/personIn.svg";
import PersonNotInSvg from "@/assets/icons/svg/personNotIn.svg";
import { WebSocketStatus } from "@/lib/websocket-util";
import { router, usePathname } from "expo-router";
import React, { useCallback, useMemo } from 'react';
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { router } from "expo-router";
import React, { useMemo } from 'react';
import { Dimensions, Image, StyleSheet, TouchableOpacity, View } from 'react-native';
import Svg, { Circle, Ellipse, G, Mask, Path, Rect } from "react-native-svg";
@ -42,14 +43,15 @@ const CenterButtonSvg = React.memo(() => (
</Svg>
));
interface AskNavbarProps {
type AskNavbarProps = BottomTabBarProps & {
wsStatus: WebSocketStatus;
}
};
const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
const AskNavbar = ({ state, descriptors, navigation, wsStatus }: AskNavbarProps) => {
// 获取设备尺寸
const { width } = useMemo(() => Dimensions.get('window'), []);
const pathname = usePathname();
const { routes, index } = state;
const currentRouteName = routes[index].name;
const statusColor = useMemo(() => {
switch (wsStatus) {
@ -64,34 +66,6 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
}
}, [wsStatus]);
// 预加载目标页面
// useEffect(() => {
// const preloadPages = async () => {
// try {
// await Promise.all([
// router.prefetch('/memo-list'),
// router.prefetch('/ask'),
// router.prefetch('/owner')
// ]);
// } catch (error) {
// console.warn('预加载页面失败:', error);
// }
// };
// preloadPages();
// }, []);
// 使用 useCallback 缓存导航函数
const navigateTo = useCallback((route: string) => {
if (route === '/ask') {
router.push({
pathname: '/ask',
params: { newSession: "true" }
});
} else {
router.push(route as any);
}
}, []);
// 使用 useMemo 缓存样式对象
const styles = useMemo(() => StyleSheet.create({
container: {
@ -156,7 +130,7 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
}), [width, statusColor]);
// 如果当前路径是ask页面则不渲染导航栏
if (pathname != '/memo-list' && pathname != '/owner') {
if (currentRouteName !== 'memo-list' && currentRouteName !== 'owner') {
return null;
}
@ -165,18 +139,18 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
<Image source={require('@/assets/images/png/owner/ask.png')} style={{ width: width * 1.18, height: 100, resizeMode: 'cover', marginLeft: -width * 0.07 }} />
<View style={styles.navContainer}>
<TouchableOpacity
onPress={() => navigateTo('/memo-list')}
onPress={() => navigation.navigate('memo-list')}
style={[styles.navButton, { alignItems: "flex-start", paddingLeft: 16 }]}
>
<TabIcon
isActive={pathname === "/memo-list"}
isActive={currentRouteName === "memo-list"}
ActiveIcon={ChatInSvg}
InactiveIcon={ChatNotInSvg}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigateTo('/ask')}
onPress={() => router.push({ pathname: '/ask', params: { newSession: "true" } })}
style={styles.centerButton}
>
<View style={styles.statusIndicator} />
@ -184,11 +158,11 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigateTo('/owner')}
onPress={() => navigation.navigate('owner')}
style={styles.navButton}
>
<TabIcon
isActive={pathname === "/owner"}
isActive={currentRouteName === "owner"}
ActiveIcon={PersonInSvg}
InactiveIcon={PersonNotInSvg}
/>