enhance: 优化页面切换效果

2025-08-03 13:58:45 +08:00 · 2025-08-03 13:58:45 +08:00 · b7d9186570
commit b7d9186570
parent 4675043d85
6 changed files with 346 additions and 200 deletions
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@ -12,6 +12,8 @@ import * as SecureStore from 'expo-secure-store';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Platform } from 'react-native';
+import { TransitionPresets } from '@react-navigation/bottom-tabs';
+import AskNavbar from '@/components/layout/ask';

 interface PollingData {
  title: string;
@ -19,6 +21,7 @@ interface PollingData {
  content: string;
  extra: any;
 }
+
 export default function TabLayout() {
  const { t } = useTranslation();
  const colorScheme = useColorScheme();
@ -171,6 +174,7 @@ export default function TabLayout() {
  }, [token]);

  return (
+    <>
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
@ -247,7 +251,8 @@ export default function TabLayout() {
            title: 'ask',
            tabBarButton: () => null, // 隐藏底部标签栏
            headerShown: false, // 隐藏导航栏
-          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
+            tabBarStyle: { display: 'none' }, // 确保在标签栏中不显示
+            ...TransitionPresets.ShiftTransition,
          }}
        />
        {/* memo list */}
@ -257,7 +262,8 @@ export default function TabLayout() {
            title: 'memo-list',
            tabBarButton: () => null, // 隐藏底部标签栏
            headerShown: false, // 隐藏导航栏
-          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
+            tabBarStyle: { display: 'none' }, // 确保在标签栏中不显示
+            ...TransitionPresets.ShiftTransition,
          }}
        />
        {/* owner */}
@ -267,7 +273,8 @@ export default function TabLayout() {
            title: 'owner',
            tabBarButton: () => null, // 隐藏底部标签栏
            headerShown: false, // 隐藏导航栏
-          tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
+            tabBarStyle: { display: 'none' }, // 确保在标签栏中不显示
+            ...TransitionPresets.ShiftTransition,
          }}
        />
        {/* 排行榜 */}
@ -358,5 +365,7 @@ export default function TabLayout() {
          }}
        />
      </Tabs >
+      <AskNavbar />
+    </>
  );
 }
--- a/app/(tabs)/memo-list.tsx
+++ b/app/(tabs)/memo-list.tsx
@ -9,7 +9,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import ChatSvg from '@/assets/icons/svg/chat.svg';
 import ErrorBoundary from '@/components/common/ErrorBoundary';
 import UploaderProgress from '@/components/file-upload/upload-progress/uploader-progress';
-import AskNavbar from '@/components/layout/ask';
+
 import SkeletonItem from '@/components/memo/SkeletonItem';

 // 类型定义
@ -176,7 +176,7 @@ const MemoList = () => {
            </Text>

            {/* 上传进度 */}
-            <UploadProgressSection />
+            {/* <UploadProgressSection /> */}
        </View>
    ), [insets.top]);

@ -220,7 +220,6 @@ const MemoList = () => {
        return (
            <View style={[styles.container, { paddingTop: insets.top }]}> 
                <SkeletonList />
-                <AskNavbar />
            </View>
        );
    }
@ -257,9 +256,6 @@ const MemoList = () => {
                    contentContainerStyle={styles.listContent}
                    ItemSeparatorComponent={() => <View style={styles.separator} />}
                />
-
-                {/* 底部导航栏 */}
-                <AskNavbar />
            </View>
        </ErrorBoundary>
    );
--- a/app/(tabs)/owner.tsx
+++ b/app/(tabs)/owner.tsx
@ -1,9 +1,10 @@
 import ConversationsSvg from '@/assets/icons/svg/conversations.svg';
 import StoriesSvg from '@/assets/icons/svg/stories.svg';
-import AskNavbar from '@/components/layout/ask';
+
 import CreateCountComponent from '@/components/owner/createCount';
 import MemberCard from '@/components/owner/rights/memberCard';
 import SettingModal from '@/components/owner/setting';
+import SkeletonOwner from '@/components/owner/SkeletonOwner';
 import UserInfo from '@/components/owner/userName';
 import { checkAuthStatus } from '@/lib/auth';
 import { fetchApi } from '@/lib/server-api-util';
@ -20,6 +21,9 @@ export default function OwnerPage() {
    const router = useRouter();
    const pathname = usePathname();

+    // 添加页面挂载状态
+    const [isMounted, setIsMounted] = useState(false);
+
    useEffect(() => {
        const checkAuth = async () => {
            const authStatus = await checkAuthStatus(router);
@ -47,11 +51,17 @@ export default function OwnerPage() {

    // 获取用户信息
    const [userInfoDetails, setUserInfoDetails] = useState<UserInfoDetails>({} as UserInfoDetails);
-    const getUserInfo = () => {
+
+    // 优化getUserInfo函数，添加挂载状态检查
+    const getUserInfo = useCallback(() => {
        fetchApi("/membership/personal-center-info").then((res) => {
+            // 只有在组件挂载时才更新状态
+            if (isMounted) {
                setUserInfoDetails(res as UserInfoDetails);
-        })
            }
+        })
+    }, [isMounted]);
+
    // 设计轮询获取数量统计
    useFocusEffect(
        useCallback(() => {
@ -70,8 +80,35 @@ export default function OwnerPage() {

    // 初始化获取用户信息
    useEffect(() => {
-        getUserInfo();
-    }, []);
+        let isActive = true;
+
+        const initialize = async () => {
+            try {
+                await getUserInfo();
+            } catch (error) {
+                console.error('初始化失败:', error);
+            } finally {
+                if (isActive) {
+                    setIsMounted(true);
+                }
+            }
+        };
+
+        initialize();
+
+        return () => {
+            isActive = false;
+        };
+    }, [getUserInfo]);
+
+    // 如果组件未完全加载，显示骨架屏
+    if (!isMounted) {
+        return (
+            <View style={[styles.container, { paddingTop: insets.top }]}>
+                <SkeletonOwner />
+            </View>
+        );
+    }

    return (
        <View style={[styles.container, { paddingTop: insets.top }]}>
@ -112,9 +149,6 @@ export default function OwnerPage() {
            {modalVisible && (
                <SettingModal modalVisible={modalVisible} setModalVisible={setModalVisible} userInfo={userInfoDetails.user_info} />
            )}
-
-            {/* 导航栏 */}
-            <AskNavbar />
        </View>
    );
 }
--- a/components/layout/ask.tsx
+++ b/components/layout/ask.tsx
@ -131,6 +131,11 @@ const AskNavbar = () => {
        }
    }), [width]);

+    // 如果当前路径是ask页面，则不渲染导航栏
+    if (pathname != '/memo-list' && pathname != '/owner') {
+        return null;
+    }
+
    return (
        <View style={styles.container}>
            <Image source={require('@/assets/images/png/owner/ask.png')} style={{ width: width, height: 80, resizeMode: 'cover' }} />
--- a/components/owner/SkeletonOwner.tsx
+++ b/components/owner/SkeletonOwner.tsx
@ -0,0 +1,92 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// 骨架屏占位组件
+const SkeletonItem = () => (
+    <View style={styles.skeletonItem} />
+);
+
+const SkeletonOwner = () => {
+    const insets = useSafeAreaInsets();
+    
+    return (
+        <View style={[styles.container, { paddingTop: insets.top }]}> 
+            {/* 用户信息骨架屏 */}
+            <View style={styles.section}>
+                <View style={styles.userInfoHeader}>
+                    <SkeletonItem />
+                    <View style={styles.userInfoTextContainer}>
+                        <SkeletonItem />
+                        <SkeletonItem />
+                    </View>
+                </View>
+                <View style={styles.userInfoStats}>
+                    <SkeletonItem />
+                    <SkeletonItem />
+                </View>
+            </View>
+            
+            {/* 会员卡骨架屏 */}
+            <View style={styles.section}>
+                <SkeletonItem />
+            </View>
+            
+            {/* 作品数据骨架屏 */}
+            <View style={styles.section}>
+                <View style={styles.countContainer}>
+                    <SkeletonItem />
+                    <SkeletonItem />
+                </View>
+            </View>
+            
+            {/* 排行榜骨架屏 */}
+            <View style={styles.section}>
+                <SkeletonItem />
+                <View style={styles.rankingList}>
+                    {Array(3).fill(0).map((_, index) => (
+                        <SkeletonItem key={`ranking-${index}`} />
+                    ))}
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    section: {
+        marginBottom: 16,
+    },
+    skeletonItem: {
+        backgroundColor: '#E1E1E1',
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    userInfoHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    userInfoTextContainer: {
+        flex: 1,
+        marginLeft: 16,
+    },
+    userInfoStats: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+    },
+    countContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        gap: 16,
+    },
+    rankingList: {
+        marginTop: 16,
+    },
+});
+
+export default SkeletonOwner;
--- a/components/owner/createCount.tsx
+++ b/components/owner/createCount.tsx
@ -1,3 +1,4 @@
+import React, { useMemo } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { ThemedText } from "../ThemedText";

@ -7,9 +8,17 @@ interface CreateCountProps {
    number: number;
    style?: StyleProp<ViewStyle>;
 }
-const CreateCountComponent = (props: CreateCountProps) => {
+
+// 使用React.memo优化组件，避免不必要的重渲染
+const CreateCountComponent = React.memo((props: CreateCountProps) => {
+    // 预计算样式以提高性能
+    const containerStyle = useMemo(() => [
+        styles.container,
+        props.style
+    ], [props.style]);
+
    return (
-        <View style={styles.container}>
+        <View style={containerStyle}>
            <ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText>
            <View style={styles.header}>
                <View className="mt-1">
@ -19,7 +28,7 @@ const CreateCountComponent = (props: CreateCountProps) => {
            </View>
        </View>
    );
-};
+});

 const styles = StyleSheet.create({
    container: {
@ -39,7 +48,7 @@ const styles = StyleSheet.create({
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
-        elevation: 5,
+        // elevation: 1,
    },
    header: {
        width: "100%",
@ -63,5 +72,6 @@ const styles = StyleSheet.create({
        textAlign: "center",
        color: "#4C320C"
    },
-})
+});
+
 export default CreateCountComponent;