refactor(TabsLayout, ImageGallery, ChatScreen, GroupInfoScreen, PrivateChatInfoScreen): enhance UI components and improve layout structure

- Adjusted tab bar dimensions and margins in TabsLayout for better visual consistency. - Streamlined ImageGallery by removing loading states and optimizing image transition handling. - Updated ChatScreen to utilize SafeAreaView for improved layout on different devices. - Enhanced GroupInfoScreen and PrivateChatInfoScreen with a consistent page header layout, including back navigation. - Refactored ChatHeader to simplify structure and improve maintainability.
2026-03-24 15:39:28 +08:00
parent 2ddb9cadd8
commit b49cc0f3bd
6 changed files with 126 additions and 110 deletions
--- a/app/(app)/(tabs)/_layout.tsx
+++ b/app/(app)/(tabs)/_layout.tsx
@@ -7,9 +7,9 @@ import { colors, shadows } from '../../../src/theme';
 import { BREAKPOINTS } from '../../../src/hooks/useResponsive';
 import { useTotalUnreadCount } from '../../../src/stores';

-const TAB_BAR_HEIGHT = 64;
-const TAB_BAR_MARGIN = 14;
+const TAB_BAR_HEIGHT = 56;
 const TAB_BAR_FLOATING_MARGIN = 12;
+const TAB_BAR_MARGIN = 24;

 export default function TabsLayout() {
  const { width } = useWindowDimensions();
@@ -27,19 +27,25 @@ export default function TabsLayout() {
          ? { display: 'none', height: 0, overflow: 'hidden' }
          : {
              position: 'absolute',
-              left: TAB_BAR_MARGIN,
-              right: TAB_BAR_MARGIN,
+              left: 0,
+              right: 0,
+              marginHorizontal: TAB_BAR_MARGIN,
              bottom: TAB_BAR_FLOATING_MARGIN + insets.bottom,
              height: TAB_BAR_HEIGHT,
-              borderRadius: 24,
+              borderRadius: 22,
              backgroundColor: colors.background.paper,
              ...shadows.lg,
              borderTopWidth: 0,
              elevation: 100,
              zIndex: 100,
            },
+        tabBarItemStyle: {
+          borderRadius: 16,
+          marginHorizontal: 2,
+          paddingVertical: 1,
+        },
        tabBarShowLabel: true,
-        tabBarLabelStyle: { fontSize: 12, fontWeight: '600', marginTop: -2 },
+        tabBarLabelStyle: { fontSize: 11, fontWeight: '600', marginTop: -1 },
      }}
    >
      <Tabs.Screen
@@ -49,7 +55,7 @@ export default function TabsLayout() {
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? 'home' : 'home-outline'}
-              size={focused ? 26 : 24}
+              size={focused ? 24 : 22}
              color={color}
            />
          ),
@@ -63,7 +69,7 @@ export default function TabsLayout() {
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? 'message-text' : 'message-text-outline'}
-              size={focused ? 26 : 24}
+              size={focused ? 24 : 22}
              color={color}
            />
          ),
@@ -74,7 +80,7 @@ export default function TabsLayout() {
        options={{
          title: '课表',
          tabBarIcon: ({ color, focused }) => (
-            <MaterialCommunityIcons name="calendar-today" size={focused ? 26 : 24} color={color} />
+            <MaterialCommunityIcons name="calendar-today" size={focused ? 24 : 22} color={color} />
          ),
        }}
      />
@@ -85,7 +91,7 @@ export default function TabsLayout() {
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? 'account' : 'account-outline'}
-              size={focused ? 26 : 24}
+              size={focused ? 24 : 22}
              color={color}
            />
          ),
--- a/src/components/common/ImageGallery.tsx
+++ b/src/components/common/ImageGallery.tsx
@@ -13,7 +13,6 @@ import {
  TouchableOpacity,
  Text,
  StatusBar,
-  ActivityIndicator,
  Alert,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
@@ -25,10 +24,8 @@ import {
 import Animated, {
  useSharedValue,
  useAnimatedStyle,
-  useDerivedValue,
  runOnJS,
  withTiming,
-  withSpring,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -91,7 +88,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
  const [currentIndex, setCurrentIndex] = useState(initialIndex);
  currentIndexRef.current = currentIndex;
  const [showControls, setShowControls] = useState(true);
-  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [saving, setSaving] = useState(false);
  const [saveToast, setSaveToast] = useState<'success' | 'error' | null>(null);
@@ -132,7 +128,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
    if (visible) {
      setCurrentIndex(initialIndex);
      setShowControls(true);
-      setLoading(true);
      setError(false);
      resetZoom();
      StatusBar.setHidden(true, 'fade');
@@ -166,7 +161,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
      if (clampedIndex === currentIndexRef.current) {
        return;
      }
-      setLoading(true);
      setError(false);
      setCurrentIndex(clampedIndex);
      onIndexChange?.(clampedIndex);
@@ -266,24 +260,16 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
  // 滑动切换图片相关状态
  const swipeTranslateX = useSharedValue(0);

-  // 滑动切图完成后，让新图从目标方向进入，避免旧图先弹回导致前后图闪烁
  useEffect(() => {
-    const direction = pendingSwipeDirectionRef.current;
-    if (direction == null) {
-      return;
-    }
    pendingSwipeDirectionRef.current = null;
-    swipeTranslateX.value = -direction * SCREEN_WIDTH;
-    swipeTranslateX.value = withTiming(0, { duration: 180 });
+    swipeTranslateX.value = 0;
  }, [currentIndex, swipeTranslateX]);

  const switchWithDirection = useCallback(
    (targetIndex: number, direction: -1 | 1) => {
-      swipeTranslateX.value = withTiming(direction * SCREEN_WIDTH, { duration: 200 }, () => {
-        runOnJS(updateIndexFromSwipe)(targetIndex, direction);
-      });
+      updateIndexFromSwipe(targetIndex, direction);
    },
-    [swipeTranslateX, updateIndexFromSwipe]
+    [updateIndexFromSwipe]
  );

  const goToPrev = useCallback(() => {
@@ -310,16 +296,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
        // 放大状态下：拖动图片
        translateX.value = savedTranslateX.value + e.translationX;
        translateY.value = savedTranslateY.value + e.translationY;
-      } else if (validImages.length > 1) {
-        // 未放大且有多张图片：切换图片的跟随效果
-        const isFirst = currentIndex === 0 && e.translationX > 0;
-        const isLast = currentIndex === validImages.length - 1 && e.translationX < 0;
-        if (isFirst || isLast) {
-          // 边界阻力效果
-          swipeTranslateX.value = e.translationX * 0.3;
-        } else {
-          swipeTranslateX.value = e.translationX;
-        }
      }
    })
    .onEnd((e) => {
@@ -337,17 +313,10 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({

        if (shouldGoNext && currentIndex < validImages.length - 1) {
          // 向左滑动，显示下一张
-          swipeTranslateX.value = withTiming(-SCREEN_WIDTH, { duration: 200 }, () => {
-            runOnJS(updateIndexFromSwipe)(currentIndex + 1, -1);
-          });
+          runOnJS(updateIndexFromSwipe)(currentIndex + 1, -1);
        } else if (shouldGoPrev && currentIndex > 0) {
          // 向右滑动，显示上一张
-          swipeTranslateX.value = withTiming(SCREEN_WIDTH, { duration: 200 }, () => {
-            runOnJS(updateIndexFromSwipe)(currentIndex - 1, 1);
-          });
-        } else {
-          // 回弹到原位
-          swipeTranslateX.value = withTiming(0, { duration: 200 });
+          runOnJS(updateIndexFromSwipe)(currentIndex - 1, 1);
        }
      }
    });
@@ -411,7 +380,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
                  disabled={saving}
                >
                  {saving ? (
-                    <ActivityIndicator size="small" color="#FFF" />
+                    <MaterialCommunityIcons name="loading" size={24} color="#FFF" />
                  ) : (
                    <MaterialCommunityIcons name="download" size={24} color="#FFF" />
                  )}
@@ -423,12 +392,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
          {/* 图片显示区域 */}
          <GestureDetector gesture={composedGesture}>
            <View style={styles.imageContainer}>
-              {loading && (
-                <View style={styles.loadingContainer}>
-                  <ActivityIndicator size="large" color="#FFF" />
-                </View>
-              )}
-
              {error && (
                <View style={styles.errorContainer}>
                  <MaterialCommunityIcons name="image-off" size={48} color="#999" />
@@ -447,13 +410,10 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
                    recyclingKey={currentImage.url}
                    transition={null}
                    allowDownscaling
-                    onLoadStart={() => setLoading(true)}
                    onLoad={() => {
-                      setLoading(false);
                      setError(false);
                    }}
                    onError={() => {
-                      setLoading(false);
                      setError(true);
                    }}
                  />
@@ -584,13 +544,6 @@ const styles = StyleSheet.create({
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT * 0.8,
  },
-  loadingContainer: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 5,
-    backgroundColor: '#000',
-  },
  errorContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
--- a/src/screens/message/ChatScreen.tsx
+++ b/src/screens/message/ChatScreen.tsx
@@ -29,7 +29,7 @@ import {
 } from 'react-native';
 import { useNavigation, useRouter } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text, ImageGallery, ImageGridItem } from '../../components/common';
 import { colors } from '../../theme';
 import * as hrefs from '../../navigation/hrefs';
@@ -364,12 +364,13 @@ export const ChatScreen: React.FC = () => {
  }, [handleMessageListContentSizeChange]);

  return (
-    <KeyboardAvoidingView
-      style={containerStyle}
-      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
-    >
-      <StatusBar style="dark" backgroundColor="#FFFFFF" />
+    <SafeAreaView style={containerStyle} edges={['top']}>
+      <KeyboardAvoidingView
+        style={styles.container}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+      >
+        <StatusBar style="dark" backgroundColor="#FFFFFF" />
      
      {/* 顶部栏 */}
      <ChatHeader
@@ -587,32 +588,33 @@ export const ChatScreen: React.FC = () => {
      />
      
      {/* 群信息侧边栏面板 - 仅大屏幕显示 */}
-      <GroupInfoPanel
-        visible={showGroupInfoPanel}
-        groupId={routeGroupId ? String(routeGroupId) : undefined}
-        groupInfo={groupInfo as any}
-        conversationId={conversationId || undefined}
-        currentUserId={currentUserId}
-        isPinned={false}
-        onClose={handleCloseGroupInfoPanel}
-        onTogglePin={(pinned) => {
-          // TODO: 实现置顶功能
-          console.log('Toggle pin:', pinned);
-        }}
-        onLeaveGroup={() => {
-          // TODO: 实现退出群聊功能
-          console.log('Leave group');
-        }}
-        onInviteMembers={() => {
-          // TODO: 实现邀请新成员功能
-          console.log('Invite members');
-        }}
-        onViewAllMembers={() => {
-          // TODO: 实现查看全部成员功能
-          console.log('View all members');
-        }}
-      />
-    </KeyboardAvoidingView>
+        <GroupInfoPanel
+          visible={showGroupInfoPanel}
+          groupId={routeGroupId ? String(routeGroupId) : undefined}
+          groupInfo={groupInfo as any}
+          conversationId={conversationId || undefined}
+          currentUserId={currentUserId}
+          isPinned={false}
+          onClose={handleCloseGroupInfoPanel}
+          onTogglePin={(pinned) => {
+            // TODO: 实现置顶功能
+            console.log('Toggle pin:', pinned);
+          }}
+          onLeaveGroup={() => {
+            // TODO: 实现退出群聊功能
+            console.log('Leave group');
+          }}
+          onInviteMembers={() => {
+            // TODO: 实现邀请新成员功能
+            console.log('Invite members');
+          }}
+          onViewAllMembers={() => {
+            // TODO: 实现查看全部成员功能
+            console.log('View all members');
+          }}
+        />
+      </KeyboardAvoidingView>
+    </SafeAreaView>
  );
 };

--- a/src/screens/message/GroupInfoScreen.tsx
+++ b/src/screens/message/GroupInfoScreen.tsx
@@ -44,6 +44,7 @@ import * as hrefs from '../../navigation/hrefs';
 import { messageManager } from '../../stores/messageManager';
 import { groupManager } from '../../stores/groupManager';
 import MutualFollowSelectorModal from './components/MutualFollowSelectorModal';
+import { AppBackButton } from '../../components/common';

 const { width: SCREEN_WIDTH } = Dimensions.get('window');

@@ -537,7 +538,12 @@ const GroupInfoScreen: React.FC = () => {

  if (loading) {
    return (
-      <SafeAreaView style={styles.container} edges={['bottom']}>
+      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+        <View style={styles.pageHeader}>
+          <AppBackButton onPress={() => router.back()} />
+          <Text variant="h3" style={styles.pageTitle}>群聊信息</Text>
+          <View style={styles.pageHeaderPlaceholder} />
+        </View>
        <Loading />
      </SafeAreaView>
    );
@@ -545,7 +551,12 @@ const GroupInfoScreen: React.FC = () => {

  if (!group) {
    return (
-      <SafeAreaView style={styles.container} edges={['bottom']}>
+      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+        <View style={styles.pageHeader}>
+          <AppBackButton onPress={() => router.back()} />
+          <Text variant="h3" style={styles.pageTitle}>群聊信息</Text>
+          <View style={styles.pageHeaderPlaceholder} />
+        </View>
        <View style={styles.errorContainer}>
          <Text variant="body" color={colors.text.secondary}>
            群组信息不存在
@@ -556,7 +567,12 @@ const GroupInfoScreen: React.FC = () => {
  }

  return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <View style={styles.pageHeader}>
+        <AppBackButton onPress={() => router.back()} />
+        <Text variant="h3" style={styles.pageTitle}>群聊信息</Text>
+        <View style={styles.pageHeaderPlaceholder} />
+      </View>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
@@ -1060,6 +1076,23 @@ const styles = StyleSheet.create({
    flex: 1,
    backgroundColor: colors.background.default,
  },
+  pageHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    backgroundColor: colors.background.paper,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.divider,
+  },
+  pageTitle: {
+    fontWeight: '600',
+  },
+  pageHeaderPlaceholder: {
+    width: 40,
+    height: 40,
+  },
  scrollView: {
    flex: 1,
  },
--- a/src/screens/message/PrivateChatInfoScreen.tsx
+++ b/src/screens/message/PrivateChatInfoScreen.tsx
@@ -30,6 +30,7 @@ import { userManager } from '../../stores/userManager';
 import { Avatar, Text, Button, Loading, Divider } from '../../components/common';
 import { User } from '../../types';
 import * as hrefs from '../../navigation/hrefs';
+import { AppBackButton } from '../../components/common';

 const PrivateChatInfoScreen: React.FC = () => {
  const router = useRouter();
@@ -309,7 +310,12 @@ const PrivateChatInfoScreen: React.FC = () => {

  if (loading) {
    return (
-      <SafeAreaView style={styles.container} edges={['bottom']}>
+      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+        <View style={styles.pageHeader}>
+          <AppBackButton onPress={() => router.back()} />
+          <Text variant="h3" style={styles.pageTitle}>私聊信息</Text>
+          <View style={styles.pageHeaderPlaceholder} />
+        </View>
        <Loading />
      </SafeAreaView>
    );
@@ -322,7 +328,12 @@ const PrivateChatInfoScreen: React.FC = () => {
  };

  return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <View style={styles.pageHeader}>
+        <AppBackButton onPress={() => router.back()} />
+        <Text variant="h3" style={styles.pageTitle}>私聊信息</Text>
+        <View style={styles.pageHeaderPlaceholder} />
+      </View>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
@@ -414,6 +425,23 @@ const styles = StyleSheet.create({
    flex: 1,
    backgroundColor: colors.background.default,
  },
+  pageHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    backgroundColor: colors.background.paper,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.divider,
+  },
+  pageTitle: {
+    fontWeight: '600',
+  },
+  pageHeaderPlaceholder: {
+    width: 40,
+    height: 40,
+  },
  scrollView: {
    flex: 1,
  },
--- a/src/screens/message/components/ChatScreen/ChatHeader.tsx
+++ b/src/screens/message/components/ChatScreen/ChatHeader.tsx
@@ -5,7 +5,6 @@

 import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Avatar, Text, AppBackButton } from '../../../../components/common';
 import { colors, spacing } from '../../../../theme';
@@ -69,14 +68,9 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
  };

  return (
-    <SafeAreaView edges={['top']} style={styles.headerContainer}>
+    <View style={styles.headerContainer}>
      <View style={styles.header}>
-        {/* 大屏幕（>= 768px）时隐藏返回按钮 */}
-        {!isWideScreen ? (
-          <AppBackButton style={styles.backButton} onPress={onBack} />
-        ) : (
-          <View style={styles.backButton} />
-        )}
+        <AppBackButton style={styles.backButton} onPress={onBack} />
        
        <View style={styles.headerCenter}>
          <TouchableOpacity
@@ -136,7 +130,7 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
          </TouchableOpacity>
        )}
      </View>
-    </SafeAreaView>
+    </View>
  );
 };