feat(performance): migrate FlatList to FlashList and add animations

Replace FlatList with FlashList across all message screens (ChatScreen, MessageListScreen, NotificationsScreen, HomeScreen) for improved list virtualization performance. Use `drawDistance={250}` instead of manual pagination. Simplify React.memo comparisons in MessageBubble and SegmentRenderer by removing function prop checks to prevent unnecessary re-renders. Add AsyncStorage persistence for lastSystemMessageAt to avoid showing current time on first render. Include enter animations (fade and slide) for CreateGroupScreen and modernize UI styling to flat design. BREAKING CHANGE: Upgrade @shopify/flash-list from 2.0.2 to ^2.3.1
2026-04-25 15:09:00 +08:00
parent 19054d64b3
commit a6a4198ac5
14 changed files with 746 additions and 680 deletions
--- a/src/screens/message/ChatScreen.tsx
+++ b/src/screens/message/ChatScreen.tsx
@@ -22,12 +22,12 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import {
  View,
-  FlatList,
  ActivityIndicator,
  KeyboardAvoidingView,
  Platform,
  TouchableOpacity,
 } from 'react-native';
+import { FlashList, ListRenderItem } from '@shopify/flash-list';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useNavigation, useRouter } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
@@ -51,6 +51,7 @@ import {
  PANEL_HEIGHTS,
  ChatScreenProps,
 } from './components/ChatScreen';
+import { GroupMessage } from './components/ChatScreen/types';

 export const ChatScreen: React.FC<ChatScreenProps> = (props) => {
  const navigation = useNavigation();
@@ -92,12 +93,12 @@ export const ChatScreen: React.FC<ChatScreenProps> = (props) => {
    isWideScreen && !props.isEmbedded ? { maxWidth: 1200, alignSelf: 'center' as const, width: '100%' as const } : null,
  ]), [isWideScreen, styles.container, props.isEmbedded]);

-  const listContentStyle = useMemo(() => ([
-    styles.listContent,
-    isWideScreen && !props.isEmbedded
-      ? { paddingHorizontal: 24, maxWidth: 900, alignSelf: 'center' as const }
-      : { paddingHorizontal: 16 },
-  ]), [isWideScreen, styles.listContent, props.isEmbedded]);
+  const listContentStyle = useMemo(() => ({
+    paddingHorizontal: isWideScreen && !props.isEmbedded ? 24 : 16,
+    ...(isWideScreen && !props.isEmbedded ? { maxWidth: 900, alignSelf: 'center' as const } : {}),
+    paddingTop: 12,
+    paddingBottom: 24,
+  }), [isWideScreen, props.isEmbedded]);

  const inputWrapperStyle = useMemo(() => ([
    styles.inputWrapper,
@@ -285,7 +286,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = (props) => {
    return map;
  }, [messages]);

-  const renderMessage = useCallback(({ item, index }: { item: any; index: number }) => {
+  const renderMessage = useCallback<ListRenderItem<GroupMessage>>(({ item, index }) => {
    // inverted 下 renderItem 的 index 与时间顺序不一致，需回查原始序索引
    const logicalIndex = messageIndexMap.get(String(item.id)) ?? index;
    return (
@@ -330,7 +331,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = (props) => {
    handleReplyPreviewPress,
  ]);

-  const keyExtractor = useCallback((item: any) => String(item.id), []);
+  const keyExtractor = useCallback((item: GroupMessage) => String(item.id), []);

  // 获取正在输入提示
  const typingHint = getTypingHint();
@@ -448,22 +449,18 @@ export const ChatScreen: React.FC<ChatScreenProps> = (props) => {
            <ActivityIndicator size="large" color={colors.primary.main} />
          </View>
        ) : (
-          <FlatList
+          <FlashList
            ref={flatListRef}
            inverted
            data={displayMessages}
            renderItem={renderMessage}
            keyExtractor={keyExtractor}
-            contentContainerStyle={listContentStyle as any}
+            contentContainerStyle={listContentStyle}
            showsVerticalScrollIndicator={false}
            keyboardShouldPersistTaps="handled"
            keyboardDismissMode="on-drag"
            scrollEnabled={true}
-            initialNumToRender={14}
-            maxToRenderPerBatch={10}
-            updateCellsBatchingPeriod={50}
-            windowSize={15}
-            removeClippedSubviews={false}
+            drawDistance={250}
            onScroll={handleMessageListScroll}
            onScrollBeginDrag={() => {
              isUserDraggingRef.current = true;
@@ -477,26 +474,6 @@ export const ChatScreen: React.FC<ChatScreenProps> = (props) => {
            }}
            scrollEventThrottle={16}
            onContentSizeChange={handleContentSizeChange}
-            onScrollToIndexFailed={(info) => {
-              const targetId = replyTargetMessageIdRef.current;
-              if (!targetId || !flatListRef.current) return;
-
-              flatListRef.current.scrollToOffset({
-                offset: Math.max(0, info.averageItemLength * info.index),
-                animated: true,
-              });
-
-              setTimeout(() => {
-                const retryIndex = displayMessages.findIndex(msg => String(msg.id) === targetId);
-                if (retryIndex >= 0) {
-                  flatListRef.current?.scrollToIndex({
-                    index: retryIndex,
-                    animated: true,
-                    viewPosition: 0.5,
-                  });
-                }
-              }, 120);
-            }}
          />
        )}
        {showEdgeLoadingIndicator && (
--- a/src/screens/message/CreateGroupScreen.tsx
+++ b/src/screens/message/CreateGroupScreen.tsx
@@ -1,10 +1,16 @@
 /**
- * CreateGroupScreen 创建群聊界面
+ * CreateGroupScreen 创建群聊界面（现代化扁平风格）
 * 允许用户创建新的群聊，设置群名称、描述，并选择初始成员
 * 支持响应式布局
+ * 
+ * 设计风格：
+ * - 纯白/浅色背景，扁平化设计
+ * - 灰色填充输入框，圆角14px
+ * - 橙色圆角按钮
+ * - 清晰的标签 + 输入框分组
 */

-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import {
  View,
  StyleSheet,
@@ -15,6 +21,9 @@ import {
  FlatList,
  Image,
  Platform,
+  Animated,
+  KeyboardAvoidingView,
+  ActivityIndicator,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
@@ -24,7 +33,7 @@ import * as ImagePicker from 'expo-image-picker';
 import { spacing, fontSizes, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
 import { groupService } from '@/services/message';
 import { uploadService } from '@/services/upload';
-import { Avatar, Text, Button, Loading } from '../../components/common';
+import { Avatar, Text, Loading } from '../../components/common';
 import { User } from '../../types';
 import MutualFollowSelectorModal from './components/MutualFollowSelectorModal';

@@ -47,6 +56,25 @@ const CreateGroupScreen: React.FC = () => {
  // 邀请成员模态框状态
  const [inviteModalVisible, setInviteModalVisible] = useState(false);

+  // 动画值
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(20)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 400,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
  useEffect(() => {
    if (inviteModalVisible) {
      blurActiveElement();
@@ -180,133 +208,150 @@ const CreateGroupScreen: React.FC = () => {
  };

  return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.keyboardView}
      >
-        {/* 群头像和名称区域 */}
-        <View style={styles.headerSection}>
-          <View style={styles.avatarContainer}>
-            <TouchableOpacity style={styles.avatarWrapper} onPress={handleSelectAvatar} disabled={uploadingAvatar}>
-              {uploadingAvatar ? (
-                <View style={[styles.avatarPlaceholder, { width: 80, height: 80 }]}>
-                  <Loading />
-                </View>
-              ) : groupAvatar ? (
-                <Image source={{ uri: groupAvatar }} style={styles.avatarImage} />
-              ) : (
-                <Avatar
-                  source={undefined}
-                  size={80}
-                  name={groupName || '群'}
-                />
-              )}
-              <View style={styles.avatarBadge}>
-                <MaterialCommunityIcons name="camera" size={14} color={colors.background.paper} />
-              </View>
-            </TouchableOpacity>
-          </View>
-
-          <View style={styles.nameInputContainer}>
-            <Text variant="label" style={styles.inputLabel}>
-              群名称 <Text color={colors.error.main}>*</Text>
-            </Text>
-            <TextInput
-              style={styles.nameInput}
-              value={groupName}
-              onChangeText={setGroupName}
-              placeholder="请输入群名称"
-              placeholderTextColor={colors.text.hint}
-              maxLength={50}
-              cursorColor={colors.primary.main}
-              selectionColor={`${colors.primary.main}40`}
-            />
-            <Text variant="caption" color={colors.text.hint} style={styles.charCount}>
-              {groupName.length}/50
-            </Text>
-          </View>
-        </View>
-
-        {/* 群描述输入 */}
-        <View style={styles.section}>
-          <Text variant="label" style={styles.sectionTitle}>
-            群描述
-          </Text>
-          <View style={styles.textAreaContainer}>
-            <TextInput
-              style={styles.textArea}
-              value={groupDescription}
-              onChangeText={setGroupDescription}
-              placeholder="介绍一下这个群聊吧..."
-              placeholderTextColor={colors.text.hint}
-              maxLength={500}
-              multiline
-              numberOfLines={4}
-              textAlignVertical="top"
-              cursorColor={colors.primary.main}
-              selectionColor={`${colors.primary.main}40`}
-            />
-            <Text variant="caption" color={colors.text.hint} style={styles.textAreaCharCount}>
-              {groupDescription.length}/500
-            </Text>
-          </View>
-        </View>
-
-        {/* 已选成员 */}
-        {selectedMembers.length > 0 && (
-          <View style={styles.section}>
-            <View style={styles.sectionHeader}>
-              <Text variant="label" style={styles.sectionTitle}>
-                已选成员
-              </Text>
-              <Text variant="caption" color={colors.primary.main}>
-                {selectedMembers.length}人
-              </Text>
-            </View>
-            <FlatList
-              data={selectedMembers}
-              renderItem={renderSelectedMember}
-              keyExtractor={item => item.id}
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              contentContainerStyle={styles.selectedMembersList}
-            />
-          </View>
-        )}
-
-        {/* 邀请成员按钮 */}
-        <TouchableOpacity
-          style={styles.inviteButton}
-          onPress={() => setInviteModalVisible(true)}
-          activeOpacity={0.8}
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
        >
-          <View style={styles.inviteIconContainer}>
-            <MaterialCommunityIcons name="account-plus" size={24} color={colors.primary.main} />
-          </View>
-          <View style={styles.inviteTextContainer}>
-            <Text variant="body" style={styles.inviteTitle}>邀请成员</Text>
-            <Text variant="caption" color={colors.text.secondary}>
-              仅可从互关好友中选择成员加入群聊
-            </Text>
-          </View>
-          <MaterialCommunityIcons name="chevron-right" size={24} color={colors.text.hint} />
-        </TouchableOpacity>
-      </ScrollView>
+          <Animated.View
+            style={[
+              styles.content,
+              {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }],
+              },
+            ]}
+          >
+            {/* 标题区域 */}
+            <View style={styles.titleSection}>
+              <Text style={styles.title}>创建群聊</Text>
+              <View style={styles.underline} />
+              <Text style={styles.subtitle}>填写群信息并邀请成员</Text>
+            </View>

-      {/* 创建按钮 */}
-      <View style={styles.footer}>
-        <Button
-          title="创建群聊"
-          onPress={handleCreateGroup}
-          loading={submitting}
-          disabled={!groupName.trim() || submitting}
-          fullWidth
-          size="lg"
-        />
-      </View>
+            {/* 群头像区域 */}
+            <View style={styles.avatarSection}>
+              <TouchableOpacity style={styles.avatarWrapper} onPress={handleSelectAvatar} disabled={uploadingAvatar}>
+                {uploadingAvatar ? (
+                  <View style={styles.avatarPlaceholder}>
+                    <Loading />
+                  </View>
+                ) : groupAvatar ? (
+                  <Image source={{ uri: groupAvatar }} style={styles.avatarImage} />
+                ) : (
+                  <View style={styles.avatarPlaceholder}>
+                    <MaterialCommunityIcons name="camera" size={28} color={colors.text.hint} />
+                  </View>
+                )}
+                <View style={styles.avatarBadge}>
+                  <MaterialCommunityIcons name="pencil" size={12} color={colors.background.paper} />
+                </View>
+              </TouchableOpacity>
+              <Text style={styles.avatarHint}>点击设置群头像</Text>
+            </View>
+
+            {/* 群名称输入 */}
+            <View style={styles.inputContainer}>
+              <Text style={styles.inputLabel}>群名称 <Text style={styles.requiredMark}>*</Text></Text>
+              <View style={styles.inputWrapper}>
+                <TextInput
+                  style={styles.input}
+                  value={groupName}
+                  onChangeText={setGroupName}
+                  placeholder="请输入群名称"
+                  placeholderTextColor={colors.text.hint}
+                  maxLength={50}
+                  cursorColor={colors.primary.main}
+                  selectionColor={`${colors.primary.main}40`}
+                  autoCapitalize="none"
+                />
+                {groupName.length > 0 && (
+                  <MaterialCommunityIcons name="check-circle" size={20} color={colors.primary.main} style={styles.checkIcon} />
+                )}
+              </View>
+              <Text style={styles.charCount}>{groupName.length}/50</Text>
+            </View>
+
+            {/* 群描述输入 */}
+            <View style={styles.inputContainer}>
+              <Text style={styles.inputLabel}>群描述</Text>
+              <View style={[styles.inputWrapper, styles.textAreaWrapper]}>
+                <TextInput
+                  style={[styles.input, styles.textArea]}
+                  value={groupDescription}
+                  onChangeText={setGroupDescription}
+                  placeholder="介绍一下这个群聊吧..."
+                  placeholderTextColor={colors.text.hint}
+                  maxLength={500}
+                  multiline
+                  numberOfLines={4}
+                  textAlignVertical="top"
+                  cursorColor={colors.primary.main}
+                  selectionColor={`${colors.primary.main}40`}
+                />
+              </View>
+              <Text style={styles.charCount}>{groupDescription.length}/500</Text>
+            </View>
+
+            {/* 已选成员 */}
+            {selectedMembers.length > 0 && (
+              <View style={styles.membersSection}>
+                <View style={styles.sectionHeader}>
+                  <Text style={styles.sectionTitle}>已选成员</Text>
+                  <Text style={styles.memberCount}>{selectedMembers.length}人</Text>
+                </View>
+                <FlatList
+                  data={selectedMembers}
+                  renderItem={renderSelectedMember}
+                  keyExtractor={item => item.id}
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  contentContainerStyle={styles.selectedMembersList}
+                />
+              </View>
+            )}
+
+            {/* 邀请成员按钮 */}
+            <TouchableOpacity
+              style={styles.inviteButton}
+              onPress={() => setInviteModalVisible(true)}
+              activeOpacity={0.8}
+            >
+              <View style={styles.inviteIconContainer}>
+                <MaterialCommunityIcons name="account-plus" size={22} color={colors.primary.main} />
+              </View>
+              <View style={styles.inviteTextContainer}>
+                <Text style={styles.inviteTitle}>邀请成员</Text>
+                <Text style={styles.inviteSubtitle}>仅可从互关好友中选择成员加入群聊</Text>
+              </View>
+              <MaterialCommunityIcons name="chevron-right" size={22} color={colors.text.hint} />
+            </TouchableOpacity>
+
+            {/* 创建按钮 */}
+            <TouchableOpacity
+              style={[
+                styles.createButton,
+                (!groupName.trim() || submitting) && styles.createButtonDisabled,
+              ]}
+              onPress={handleCreateGroup}
+              disabled={!groupName.trim() || submitting}
+              activeOpacity={0.9}
+            >
+              {submitting ? (
+                <ActivityIndicator size="small" color={colors.text.inverse} />
+              ) : (
+                <Text style={styles.createButtonText}>创建群聊</Text>
+              )}
+            </TouchableOpacity>
+          </Animated.View>
+        </ScrollView>
+      </KeyboardAvoidingView>

      <MutualFollowSelectorModal
        visible={inviteModalVisible}
@@ -324,39 +369,73 @@ function createCreateGroupStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.paper,
+    },
+    keyboardView: {
+      flex: 1,
    },
    scrollView: {
      flex: 1,
    },
    scrollContent: {
-      padding: spacing.md,
-      paddingBottom: spacing.xl * 2,
+      flexGrow: 1,
+      paddingHorizontal: 28,
+      paddingTop: 40,
+      paddingBottom: 40,
    },
-    // 头部区域样式 - 扁平化
-    headerSection: {
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      marginBottom: spacing.xl,
+    content: {
+      flex: 1,
+      maxWidth: 400,
+      width: '100%',
+      alignSelf: 'center',
    },
-    avatarContainer: {
-      marginRight: spacing.lg,
+
+    // 标题区域
+    titleSection: {
+      marginBottom: 32,
+      marginTop: 12,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: '700',
+      color: colors.text.primary,
+      lineHeight: 36,
+    },
+    underline: {
+      width: 40,
+      height: 4,
+      backgroundColor: colors.primary.main,
+      borderRadius: 2,
+      marginTop: 12,
+      marginBottom: 12,
+    },
+    subtitle: {
+      fontSize: 15,
+      color: colors.text.secondary,
+    },
+
+    // 头像区域
+    avatarSection: {
+      alignItems: 'center',
+      marginBottom: 32,
    },
    avatarWrapper: {
      position: 'relative',
    },
    avatarImage: {
-      width: 80,
-      height: 80,
-      borderRadius: 40,
+      width: 88,
+      height: 88,
+      borderRadius: 44,
      borderWidth: 3,
      borderColor: colors.primary.light + '40',
    },
    avatarPlaceholder: {
+      width: 88,
+      height: 88,
+      borderRadius: 44,
+      backgroundColor: colors.background.default,
      justifyContent: 'center',
      alignItems: 'center',
-      backgroundColor: colors.background.default,
-      borderRadius: 40,
      borderWidth: 2,
      borderColor: colors.divider,
      borderStyle: 'dashed',
@@ -374,76 +453,89 @@ function createCreateGroupStyles(colors: AppColors) {
      borderWidth: 3,
      borderColor: colors.background.paper,
    },
-    nameInputContainer: {
-      flex: 1,
-      paddingTop: spacing.sm,
+    avatarHint: {
+      marginTop: 10,
+      fontSize: 13,
+      color: colors.text.hint,
+      fontWeight: '500',
+    },
+
+    // 输入框区域（参考登录注册风格）
+    inputContainer: {
+      marginBottom: 24,
    },
    inputLabel: {
-      marginBottom: spacing.sm,
-      fontWeight: '700',
-      fontSize: fontSizes.sm + 1,
-      letterSpacing: 0.3,
+      fontSize: 14,
+      fontWeight: '500',
+      color: colors.text.secondary,
+      marginBottom: 10,
    },
-    nameInput: {
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.md,
-      fontSize: fontSizes.lg,
-      color: colors.text.primary,
-      borderWidth: 1.5,
-      borderColor: colors.divider + '80',
+    requiredMark: {
+      color: colors.error.main,
      fontWeight: '600',
    },
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.default,
+      borderRadius: 14,
+      paddingHorizontal: 18,
+      minHeight: 56,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    },
+    input: {
+      flex: 1,
+      fontSize: 16,
+      color: colors.text.primary,
+      minHeight: 56,
+    },
+    textAreaWrapper: {
+      paddingVertical: 14,
+      alignItems: 'flex-start',
+    },
+    textArea: {
+      minHeight: 100,
+      lineHeight: 22,
+      textAlignVertical: 'top',
+    },
+    checkIcon: {
+      marginLeft: 8,
+    },
    charCount: {
      textAlign: 'right',
-      marginTop: spacing.xs,
+      marginTop: 6,
+      fontSize: 12,
+      color: colors.text.hint,
      fontWeight: '500',
-      fontSize: fontSizes.sm,
    },
-    // 区域样式
-    section: {
-      marginBottom: spacing.xl,
+
+    // 成员区域
+    membersSection: {
+      marginBottom: 24,
    },
    sectionHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
-      marginBottom: spacing.md,
+      marginBottom: 12,
    },
    sectionTitle: {
-      fontWeight: '800',
-      fontSize: fontSizes.md + 1,
-      marginBottom: spacing.sm,
-      letterSpacing: 0.3,
-    },
-    // 文本域样式 - 更现代
-    textAreaContainer: {
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
-      borderWidth: 1.5,
-      borderColor: colors.divider + '80',
-      padding: spacing.md,
-    },
-    textArea: {
-      minHeight: 100,
-      fontSize: fontSizes.md,
-      color: colors.text.primary,
-      lineHeight: 22,
-    },
-    textAreaCharCount: {
-      textAlign: 'right',
-      marginTop: spacing.sm,
+      fontSize: 14,
      fontWeight: '500',
-      fontSize: fontSizes.sm,
+      color: colors.text.secondary,
+    },
+    memberCount: {
+      fontSize: 13,
+      color: colors.primary.main,
+      fontWeight: '600',
    },
-    // 已选成员样式
    selectedMembersList: {
-      paddingVertical: spacing.sm,
+      paddingVertical: 4,
    },
    selectedMemberItem: {
      alignItems: 'center',
-      marginRight: spacing.lg,
+      marginRight: 16,
      width: 64,
    },
    removeMemberButton: {
@@ -462,48 +554,62 @@ function createCreateGroupStyles(colors: AppColors) {
      borderColor: colors.background.paper,
    },
    selectedMemberName: {
-      marginTop: spacing.xs,
+      marginTop: 4,
      textAlign: 'center',
      width: '100%',
      fontWeight: '600',
-      fontSize: fontSizes.sm,
+      fontSize: 12,
+      color: colors.text.primary,
    },
-    // 邀请按钮样式 - 扁平化
+
+    // 邀请按钮
    inviteButton: {
      flexDirection: 'row',
      alignItems: 'center',
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
-      padding: spacing.md,
-      marginBottom: spacing.xl,
-      borderWidth: 0.5,
-      borderColor: colors.divider + '40',
+      backgroundColor: colors.background.default,
+      borderRadius: 14,
+      padding: 16,
+      marginBottom: 32,
    },
    inviteIconContainer: {
-      width: 48,
-      height: 48,
-      borderRadius: borderRadius.lg,
+      width: 44,
+      height: 44,
+      borderRadius: 12,
      backgroundColor: colors.primary.light + '15',
      justifyContent: 'center',
      alignItems: 'center',
-      marginRight: spacing.md,
+      marginRight: 14,
    },
    inviteTextContainer: {
      flex: 1,
    },
    inviteTitle: {
-      fontWeight: '700',
-      fontSize: fontSizes.md + 1,
+      fontWeight: '600',
+      fontSize: 16,
+      color: colors.text.primary,
      marginBottom: 2,
-      letterSpacing: 0.3,
    },
-    // 底部按钮样式
-    footer: {
-      padding: spacing.lg,
-      paddingBottom: spacing.xl,
-      backgroundColor: colors.background.paper,
-      borderTopWidth: 0.5,
-      borderTopColor: colors.divider + '60',
+    inviteSubtitle: {
+      fontSize: 13,
+      color: colors.text.secondary,
+    },
+
+    // 创建按钮
+    createButton: {
+      height: 56,
+      borderRadius: 14,
+      backgroundColor: colors.primary.main,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 16,
+    },
+    createButtonDisabled: {
+      opacity: 0.6,
+    },
+    createButtonText: {
+      fontSize: 17,
+      fontWeight: '600',
+      color: colors.text.inverse,
    },
  });
 }
--- a/src/screens/message/JoinGroupScreen.tsx
+++ b/src/screens/message/JoinGroupScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import {
  View,
  StyleSheet,
@@ -9,7 +9,12 @@ import {
  Clipboard,
  FlatList,
  RefreshControl,
+  Animated,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { MaterialCommunityIcons } from '@expo/vector-icons';

@@ -26,112 +31,137 @@ function createJoinGroupStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
-      backgroundColor: colors.background.default,
-      padding: spacing.md,
-    },
-    heroCard: {
      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.xl,
-      padding: spacing.lg,
-      marginBottom: spacing.md,
-      borderWidth: 0.5,
-      borderColor: colors.divider + '40',
    },
-    heroIconWrap: {
-      width: 48,
-      height: 48,
-      borderRadius: 24,
-      backgroundColor: colors.primary.light + '15',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginBottom: spacing.md,
-    },
-    heroTitle: {
-      marginBottom: spacing.xs,
-      fontWeight: '800',
-      fontSize: fontSizes.xl + 1,
-      letterSpacing: 0.3,
-    },
-    tip: {
-      lineHeight: 22,
-      fontWeight: '400',
-    },
-    formCard: {
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.xl,
-      padding: spacing.lg,
+    keyboardView: {
      flex: 1,
-      borderWidth: 0.5,
-      borderColor: colors.divider + '40',
    },
-    label: {
-      marginBottom: spacing.xs,
+    scrollContent: {
+      flexGrow: 1,
+      paddingHorizontal: 28,
+      paddingTop: 40,
+      paddingBottom: 40,
+    },
+    content: {
+      flex: 1,
+      maxWidth: 400,
+      width: '100%',
+      alignSelf: 'center',
+    },
+
+    // 标题区域
+    titleSection: {
+      marginBottom: 32,
+      marginTop: 12,
+    },
+    title: {
+      fontSize: 28,
      fontWeight: '700',
-      fontSize: fontSizes.sm + 1,
-    },
-    input: {
-      flex: 1,
-      borderWidth: 1.5,
-      borderColor: colors.divider + '80',
-      borderRadius: borderRadius.lg,
-      backgroundColor: colors.background.default,
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.md,
      color: colors.text.primary,
-      fontSize: fontSizes.md,
+      lineHeight: 36,
+    },
+    underline: {
+      width: 40,
+      height: 4,
+      backgroundColor: colors.primary.main,
+      borderRadius: 2,
+      marginTop: 12,
+      marginBottom: 12,
+    },
+    subtitle: {
+      fontSize: 15,
+      color: colors.text.secondary,
+    },
+
+    // 搜索区域
+    searchSection: {
+      marginBottom: 24,
+    },
+    inputLabel: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: colors.text.secondary,
+      marginBottom: 10,
    },
    searchRow: {
      flexDirection: 'row',
      alignItems: 'center',
-      marginBottom: spacing.md,
+    },
+    inputWrapper: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background.default,
+      borderRadius: 14,
+      paddingHorizontal: 18,
+      height: 56,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    },
+    input: {
+      flex: 1,
+      fontSize: 16,
+      color: colors.text.primary,
+      height: 56,
    },
    searchBtn: {
-      width: 46,
-      height: 46,
-      borderRadius: borderRadius.lg,
+      width: 56,
+      height: 56,
+      borderRadius: 14,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
      marginLeft: spacing.sm,
    },
+    searchBtnDisabled: {
+      opacity: 0.5,
+    },
+
+    // 搜索结果区域
    searchResultSection: {
-      marginBottom: spacing.md,
+      marginBottom: 24,
    },
    sectionTitle: {
-      marginBottom: spacing.sm,
-      fontWeight: '800',
-      fontSize: fontSizes.md + 1,
-      letterSpacing: 0.3,
+      fontSize: 14,
+      fontWeight: '500',
+      color: colors.text.secondary,
+      marginBottom: 12,
    },
-    listSection: {
-      flex: 1,
+    emptyText: {
+      textAlign: 'center',
+      fontSize: 14,
+      color: colors.text.hint,
+      fontWeight: '500',
+      paddingVertical: spacing.lg,
    },
+
+    // 群卡片
    groupCard: {
-      borderWidth: 0.5,
-      borderColor: colors.divider + '40',
-      borderRadius: borderRadius.lg,
-      padding: spacing.md,
      backgroundColor: colors.background.default,
+      borderRadius: 16,
+      padding: spacing.lg,
      marginBottom: spacing.md,
    },
    groupHeader: {
      flexDirection: 'row',
      alignItems: 'center',
+      marginBottom: spacing.sm,
    },
    groupMeta: {
      marginLeft: spacing.md,
      flex: 1,
    },
    groupName: {
-      marginBottom: spacing.xs,
      fontWeight: '700',
-      fontSize: fontSizes.md + 1,
-      letterSpacing: 0.3,
+      fontSize: 16,
+      color: colors.text.primary,
+      marginBottom: 2,
    },
    groupDesc: {
-      marginTop: spacing.sm,
+      fontSize: 13,
+      color: colors.text.secondary,
      lineHeight: 20,
-      fontWeight: '400',
+      marginTop: spacing.sm,
    },
    groupInfoRow: {
      marginTop: spacing.sm,
@@ -139,12 +169,20 @@ function createJoinGroupStyles(colors: AppColors) {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
+    groupInfoText: {
+      fontSize: 12,
+      color: colors.text.secondary,
+    },
    groupNoRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginBottom: spacing.md,
    },
+    groupNoText: {
+      fontSize: 12,
+      color: colors.text.secondary,
+    },
    copyBtn: {
      flexDirection: 'row',
      alignItems: 'center',
@@ -155,15 +193,17 @@ function createJoinGroupStyles(colors: AppColors) {
    },
    copyBtnText: {
      marginLeft: 4,
+      fontSize: 12,
      fontWeight: '600',
+      color: colors.primary.main,
    },
    submitBtn: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
-      borderRadius: borderRadius.lg,
+      borderRadius: 14,
      backgroundColor: colors.primary.main,
-      minHeight: 46,
+      height: 48,
    },
    submitBtnDisabled: {
      opacity: 0.5,
@@ -171,12 +211,13 @@ function createJoinGroupStyles(colors: AppColors) {
    submitText: {
      marginLeft: spacing.xs,
      fontWeight: '700',
-      fontSize: fontSizes.md,
+      fontSize: 15,
+      color: colors.text.inverse,
    },
-    emptyText: {
-      marginTop: spacing.sm,
-      textAlign: 'center',
-      fontWeight: '500',
+
+    // 推荐区域
+    recommendSection: {
+      flex: 1,
    },
    loadingFooter: {
      paddingVertical: spacing.md,
@@ -186,10 +227,16 @@ function createJoinGroupStyles(colors: AppColors) {
      paddingVertical: spacing.md,
      alignItems: 'center',
    },
+    loadMoreText: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: colors.primary.main,
+    },
    noMoreText: {
      textAlign: 'center',
      paddingVertical: spacing.md,
      fontWeight: '500',
+      fontSize: 13,
      color: colors.text.hint,
    },
  });
@@ -205,6 +252,25 @@ const JoinGroupScreen: React.FC = () => {
  const [searchedGroup, setSearchedGroup] = useState<GroupResponse | null>(null);
  const [searched, setSearched] = useState(false);

+  // 动画值
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(20)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 400,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
  // 使用游标分页 Hook 管理群组列表
  const {
    list: groups,
@@ -296,31 +362,31 @@ const JoinGroupScreen: React.FC = () => {
        <View style={styles.groupHeader}>
          <Avatar source={group.avatar} size={52} name={group.name} />
          <View style={styles.groupMeta}>
-            <Text variant="body" style={styles.groupName} numberOfLines={1}>
+            <Text style={styles.groupName} numberOfLines={1}>
              {group.name}
            </Text>
          </View>
        </View>
        {!!group.description && (
-          <Text variant="caption" color={colors.text.secondary} style={styles.groupDesc}>
+          <Text style={styles.groupDesc}>
            {group.description}
          </Text>
        )}
        <View style={styles.groupInfoRow}>
-          <Text variant="caption" color={colors.text.secondary}>
+          <Text style={styles.groupInfoText}>
            成员 {group.member_count}/{group.max_members}
          </Text>
-          <Text variant="caption" color={colors.text.secondary}>
+          <Text style={styles.groupInfoText}>
            {getJoinTypeText(group.join_type)}
          </Text>
        </View>
        <View style={styles.groupNoRow}>
-          <Text variant="caption" color={colors.text.secondary}>
+          <Text style={styles.groupNoText}>
            群号：{formatGroupNo(group.id)}
          </Text>
          <TouchableOpacity style={styles.copyBtn} onPress={() => handleCopyGroupId(group.id)}>
            <MaterialCommunityIcons name="content-copy" size={14} color={colors.primary.main} />
-            <Text variant="caption" color={colors.primary.main} style={styles.copyBtnText}>
+            <Text style={styles.copyBtnText}>
              复制
            </Text>
          </TouchableOpacity>
@@ -331,11 +397,11 @@ const JoinGroupScreen: React.FC = () => {
          disabled={isJoining}
        >
          {isJoining ? (
-            <ActivityIndicator color="#fff" />
+            <ActivityIndicator color={colors.text.inverse} />
          ) : (
            <>
-              <MaterialCommunityIcons name="send-outline" size={18} color="#fff" />
-              <Text variant="body" color="#fff" style={styles.submitText}>
+              <MaterialCommunityIcons name="send-outline" size={18} color={colors.text.inverse} />
+              <Text style={styles.submitText}>
                申请入群
              </Text>
            </>
@@ -362,9 +428,7 @@ const JoinGroupScreen: React.FC = () => {
    if (searchedGroup) {
      return (
        <View style={styles.searchResultSection}>
-          <Text variant="caption" color={colors.text.secondary} style={styles.sectionTitle}>
-            搜索结果
-          </Text>
+          <Text style={styles.sectionTitle}>搜索结果</Text>
          {renderGroupItem({ item: searchedGroup })}
        </View>
      );
@@ -372,9 +436,12 @@ const JoinGroupScreen: React.FC = () => {

    if (!searching) {
      return (
-        <Text variant="caption" color={colors.text.secondary} style={styles.emptyText}>
-          暂无搜索结果，请检查群ID后重试
-        </Text>
+        <View style={styles.searchResultSection}>
+          <Text style={styles.sectionTitle}>搜索结果</Text>
+          <Text style={styles.emptyText}>
+            暂无搜索结果，请检查群ID后重试
+          </Text>
+        </View>
      );
    }

@@ -382,91 +449,113 @@ const JoinGroupScreen: React.FC = () => {
  };

  return (
-    <View style={styles.container}>
-      <View style={styles.heroCard}>
-        <View style={styles.heroIconWrap}>
-          <MaterialCommunityIcons name="account-group-outline" size={28} color={colors.primary.main} />
-        </View>
-        <Text variant="h3" style={styles.heroTitle}>搜索群聊</Text>
-        <Text variant="body" color={colors.text.secondary} style={styles.tip}>
-          输入群 ID 搜索后，你可以先查看群资料，再决定是否申请加入。
-        </Text>
-      </View>
-
-      <View style={styles.formCard}>
-        <Text variant="caption" color={colors.text.secondary} style={styles.label}>
-          搜索群聊（群ID）
-        </Text>
-        <View style={styles.searchRow}>
-          <TextInput
-            value={keyword}
-            onChangeText={setKeyword}
-            placeholder="例如：7391234567890"
-            placeholderTextColor={colors.text.hint}
-            style={styles.input}
-            editable={!searching && !joiningGroupId}
-            autoCapitalize="none"
-            cursorColor={colors.primary.main}
-            selectionColor={`${colors.primary.main}40`}
-          />
-          <TouchableOpacity
-            style={[styles.searchBtn, (!keyword.trim() || searching || !!joiningGroupId) && styles.submitBtnDisabled]}
-            onPress={handleSearch}
-            disabled={!keyword.trim() || searching || !!joiningGroupId}
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.keyboardView}
+      >
+        <ScrollView
+          contentContainerStyle={styles.scrollContent}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl
+              refreshing={isRefreshing}
+              onRefresh={refresh}
+              colors={[colors.primary.main]}
+              tintColor={colors.primary.main}
+            />
+          }
+        >
+          <Animated.View
+            style={[
+              styles.content,
+              {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }],
+              },
+            ]}
          >
-            {searching ? (
-              <ActivityIndicator color="#fff" />
-            ) : (
-              <MaterialCommunityIcons name="magnify" size={20} color="#fff" />
-            )}
-          </TouchableOpacity>
-        </View>
+            {/* 标题区域 */}
+            <View style={styles.titleSection}>
+              <Text style={styles.title}>加入群聊</Text>
+              <View style={styles.underline} />
+              <Text style={styles.subtitle}>搜索群ID或浏览推荐群组</Text>
+            </View>

-        {/* 搜索结果 */}
-        {renderSearchResult()}
-
-        {/* 群组列表 */}
-        <View style={styles.listSection}>
-          <Text variant="caption" color={colors.text.secondary} style={styles.sectionTitle}>
-            推荐群组
-          </Text>
-          <FlatList
-            data={groups}
-            renderItem={renderGroupItem}
-            keyExtractor={(item) => String(item.id)}
-            refreshControl={
-              <RefreshControl
-                refreshing={isRefreshing}
-                onRefresh={refresh}
-                colors={[colors.primary.main]}
-                tintColor={colors.primary.main}
-              />
-            }
-            onEndReached={loadMore}
-            onEndReachedThreshold={0.3}
-            ListEmptyComponent={renderEmptyList}
-            ListFooterComponent={
-              isLoading ? (
-                <View style={styles.loadingFooter}>
-                  <ActivityIndicator color={colors.primary.main} />
+            {/* 搜索区域 */}
+            <View style={styles.searchSection}>
+              <Text style={styles.inputLabel}>搜索群聊（群ID）</Text>
+              <View style={styles.searchRow}>
+                <View style={styles.inputWrapper}>
+                  <TextInput
+                    value={keyword}
+                    onChangeText={setKeyword}
+                    placeholder="例如：7391234567890"
+                    placeholderTextColor={colors.text.hint}
+                    style={styles.input}
+                    editable={!searching && !joiningGroupId}
+                    autoCapitalize="none"
+                    cursorColor={colors.primary.main}
+                    selectionColor={`${colors.primary.main}40`}
+                  />
                </View>
-              ) : hasMore ? (
-                <TouchableOpacity style={styles.loadMoreBtn} onPress={loadMore}>
-                  <Text variant="caption" color={colors.primary.main}>
-                    加载更多
-                  </Text>
+                <TouchableOpacity
+                  style={[
+                    styles.searchBtn,
+                    (!keyword.trim() || searching || !!joiningGroupId) && styles.searchBtnDisabled,
+                  ]}
+                  onPress={handleSearch}
+                  disabled={!keyword.trim() || searching || !!joiningGroupId}
+                >
+                  {searching ? (
+                    <ActivityIndicator color={colors.text.inverse} />
+                  ) : (
+                    <MaterialCommunityIcons name="magnify" size={22} color={colors.text.inverse} />
+                  )}
                </TouchableOpacity>
-              ) : groups.length > 0 ? (
-                <Text variant="caption" color={colors.text.hint} style={styles.noMoreText}>
-                  没有更多群组了
-                </Text>
-              ) : null
-            }
-            showsVerticalScrollIndicator={false}
-          />
-        </View>
-      </View>
-    </View>
+              </View>
+            </View>
+
+            {/* 搜索结果 */}
+            {renderSearchResult()}
+
+            {/* 推荐群组 */}
+            <View style={styles.recommendSection}>
+              <Text style={styles.sectionTitle}>推荐群组</Text>
+              {groups.length === 0 && !isLoading ? (
+                renderEmptyList()
+              ) : (
+                <>
+                  {groups.map((group) => (
+                    <View key={String(group.id)}>
+                      {renderGroupItem({ item: group })}
+                    </View>
+                  ))}
+                  {isLoading && (
+                    <View style={styles.loadingFooter}>
+                      <ActivityIndicator color={colors.primary.main} />
+                    </View>
+                  )}
+                  {hasMore && !isLoading && (
+                    <TouchableOpacity style={styles.loadMoreBtn} onPress={loadMore}>
+                      <Text style={styles.loadMoreText}>
+                        加载更多
+                      </Text>
+                    </TouchableOpacity>
+                  )}
+                  {!hasMore && groups.length > 0 && (
+                    <Text style={styles.noMoreText}>
+                      没有更多群组了
+                    </Text>
+                  )}
+                </>
+              )}
+            </View>
+          </Animated.View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
  );
 };

--- a/src/screens/message/MessageListScreen.tsx
+++ b/src/screens/message/MessageListScreen.tsx
@@ -12,7 +12,6 @@
 import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
  View,
-  FlatList,
  StyleSheet,
  TouchableOpacity,
  Pressable,
@@ -24,6 +23,7 @@ import {
  BackHandler,
  Platform,
 } from 'react-native';
+import { FlashList, ListRenderItem } from '@shopify/flash-list';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { useIsFocused } from '@react-navigation/native';
@@ -115,6 +115,7 @@ export const MessageListScreen: React.FC = () => {
  // 使用 MessageManager 获取未读数和系统通知数
  const { totalUnreadCount, systemUnreadCount } = useUnreadCount();
  const lastSystemMessageAt = useMessageStore(state => state.lastSystemMessageAt);
+  const systemMessageTime = lastSystemMessageAt ?? '';
  const { markAllAsRead, isMarking } = useMarkAsRead(null);

  // 【新架构】使用MessageManager的hook创建会话
@@ -162,14 +163,14 @@ export const MessageListScreen: React.FC = () => {
      seq: 0,
      segments: [{ type: 'text', data: { text: '系统通知' } }],
      status: 'normal',
-      created_at: lastSystemMessageAt || new Date().toISOString(),
+      created_at: systemMessageTime,
    },
-    last_message_at: lastSystemMessageAt || new Date().toISOString(),
+    last_message_at: systemMessageTime,
    unread_count: systemUnreadCount,
    participants: [],
-    created_at: lastSystemMessageAt || new Date().toISOString(),
-    updated_at: lastSystemMessageAt || new Date().toISOString(),
-  }), [systemUnreadCount, lastSystemMessageAt]);
+    created_at: systemMessageTime,
+    updated_at: systemMessageTime,
+  }), [systemUnreadCount, systemMessageTime]);

  // 动画值
  const [scaleAnims] = useState(() =>
@@ -453,7 +454,6 @@ export const MessageListScreen: React.FC = () => {
  // 创建系统通知会话项
  const createSystemMessageItem = (): ConversationResponse => {
    const noticeContent = systemUnreadCount > 0 ? `您有 ${systemUnreadCount} 条未读通知` : '暂无新通知';
-    const lastTime = lastSystemMessageAt || new Date().toISOString();
    return {
      id: SYSTEM_MESSAGE_CHANNEL_ID,
      type: 'private',
@@ -465,13 +465,13 @@ export const MessageListScreen: React.FC = () => {
        seq: 0,
        segments: [{ type: 'text', data: { text: noticeContent } }],
        status: 'normal',
-        created_at: lastTime,
+        created_at: systemMessageTime,
      },
-      last_message_at: lastTime,
+      last_message_at: systemMessageTime,
      unread_count: systemUnreadCount,
      participants: [],
-      created_at: lastTime,
-      updated_at: lastTime,
+      created_at: systemMessageTime,
+      updated_at: systemMessageTime,
    };
  };

@@ -500,8 +500,8 @@ export const MessageListScreen: React.FC = () => {
  const totalUnread = totalUnreadCount + systemUnreadCount;

  // 渲染会话项（行级 memo + 按 id 解析最新会话，避免 Tab 切换时整表无效重绘）
-  const renderConversation = useCallback(
-    ({ item, index }: { item: ConversationResponse; index: number }) => {
+  const renderConversation = useCallback<ListRenderItem<ConversationResponse>>(
+    ({ item, index }) => {
      const isSelected = selectedConversation?.id === item.id;
      return (
        <ConversationListRow
@@ -715,7 +715,7 @@ export const MessageListScreen: React.FC = () => {
      </View>

      {/* 搜索结果 */}
-      <FlatList
+      <FlashList
        data={searchResults}
        renderItem={renderSearchResult}
        keyExtractor={(item, index) => {
@@ -724,14 +724,16 @@ export const MessageListScreen: React.FC = () => {
          }
          return `user-${item.user?.id || index}`;
        }}
-        contentContainerStyle={[
-          styles.searchResultsContent,
-          { paddingBottom: listBottomInset },
-        ]}
+        contentContainerStyle={{
+          paddingHorizontal: spacing.md,
+          paddingTop: spacing.sm,
+          paddingBottom: listBottomInset,
+        }}
        showsVerticalScrollIndicator={false}
        scrollEnabled={true}
        keyboardShouldPersistTaps="handled"
        keyboardDismissMode="on-drag"
+        drawDistance={250}
        ListEmptyComponent={renderSearchEmpty}
      />
    </View>
@@ -779,15 +781,15 @@ export const MessageListScreen: React.FC = () => {
          <ActivityIndicator size="large" color={colors.primary.main} />
        </View>
      ) : (
-        <FlatList
+        <FlashList
          data={listData}
          renderItem={renderConversation}
          keyExtractor={(item) => String(item.id)}
-          contentContainerStyle={[
-            styles.listContent,
-            ...(isWideScreen ? [styles.listContentWide] : []),
-            { paddingBottom: listBottomInset },
-          ]}
+          contentContainerStyle={{
+            backgroundColor: colors.background.default,
+            paddingHorizontal: spacing.xs,
+            paddingBottom: listBottomInset,
+          }}
          showsVerticalScrollIndicator={false}
          ListEmptyComponent={renderEmpty}
          onEndReached={onEndReached}
@@ -795,6 +797,7 @@ export const MessageListScreen: React.FC = () => {
          scrollEnabled={true}
          keyboardShouldPersistTaps="handled"
          keyboardDismissMode="on-drag"
+          drawDistance={250}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
--- a/src/screens/message/NotificationsScreen.tsx
+++ b/src/screens/message/NotificationsScreen.tsx
@@ -14,7 +14,6 @@
 import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
  View,
-  FlatList,
  StyleSheet,
  TouchableOpacity,
  RefreshControl,
@@ -25,6 +24,7 @@ import {
  StatusBar,
  ScrollView,
 } from 'react-native';
+import { FlashList, ListRenderItem } from '@shopify/flash-list';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useIsFocused } from '@react-navigation/native';
 import { useRouter } from 'expo-router';
@@ -353,13 +353,13 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
  };

  // 渲染消息项
-  const renderMessage = ({ item }: { item: SystemMessageResponse }) => (
+  const renderMessage = useCallback<ListRenderItem<SystemMessageResponse>>(({ item }) => (
    <SystemMessageItem
      message={item}
      onPress={() => handleMessagePress(item)}
      onAvatarPress={() => handleAvatarPress(item)}
    />
-  );
+  ), []);

  // 渲染底部加载指示器
  const renderFooter = () => {
@@ -500,7 +500,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                <ActivityIndicator size="large" color={colors.primary.main} />
              </View>
            ) : (
-              <FlatList
+              <FlashList
                data={filteredMessages}
                renderItem={renderMessage}
                keyExtractor={item => item.id.toString()}
@@ -513,6 +513,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                scrollEnabled={true}
                keyboardShouldPersistTaps="handled"
                keyboardDismissMode="on-drag"
+                drawDistance={250}
                refreshControl={
                  <RefreshControl
                    refreshing={refreshing}
@@ -585,7 +586,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                <ActivityIndicator size="large" color={colors.primary.main} />
              </View>
            ) : (
-              <FlatList
+              <FlashList
                data={filteredMessages}
                renderItem={renderMessage}
                keyExtractor={item => item.id.toString()}
@@ -598,6 +599,7 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
                scrollEnabled={true}
                keyboardShouldPersistTaps="handled"
                keyboardDismissMode="on-drag"
+                drawDistance={250}
                refreshControl={
                  <RefreshControl
                    refreshing={refreshing}
--- a/src/screens/message/components/ChatScreen/MessageBubble.tsx
+++ b/src/screens/message/components/ChatScreen/MessageBubble.tsx
@@ -5,10 +5,9 @@
 */

 import React, { useRef, useMemo, useCallback } from 'react';
-import { 
-  View, 
-  TouchableOpacity, 
-  Image, 
+import {
+  View,
+  TouchableOpacity,
  GestureResponderEvent,
  StyleSheet,
  Dimensions,
@@ -123,8 +122,6 @@ const MessageBubbleInner: React.FC<MessageBubbleProps> = ({
      };
    });
  
-  // 检查当前消息是否被选中
-  
  // 获取发送者信息（群聊）- 供子组件使用
  const getSenderInfo = React.useCallback((senderId: string): SenderInfo => {
    if (senderId === currentUserId) {
@@ -153,7 +150,7 @@ const MessageBubbleInner: React.FC<MessageBubbleProps> = ({
  }, [currentUserId, currentUser?.nickname, currentUser?.avatar, groupMembers]);

  // 使用useMemo确保senderInfo在message.sender变化时重新计算
-  const senderInfo = React.useMemo((): SenderInfo | null => {
+  const senderInfo = useMemo((): SenderInfo | null => {
    if (!isGroupChat) return null;

    const senderId = message.sender_id;
@@ -204,6 +201,9 @@ const MessageBubbleInner: React.FC<MessageBubbleProps> = ({
    return map;
  }, [groupMembers]);

+  // FlashList 回收复用时重置内部状态
+  const messageKey = String(message.id);
+
  // 记录按压位置
  const handlePressIn = (event: GestureResponderEvent) => {
    const { pageX, pageY } = event.nativeEvent;
@@ -464,13 +464,15 @@ const MessageBubbleInner: React.FC<MessageBubbleProps> = ({

  // 使用 SwipeableMessageBubble 包裹消息内容
  return (
-    <SwipeableMessageBubble
-      isMe={isMe}
-      onReply={handleSwipeReply}
-      enabled={!!onReply}
-    >
-      {messageContent}
-    </SwipeableMessageBubble>
+    <View style={{ width: '100%' }} key={messageKey}>
+      <SwipeableMessageBubble
+        isMe={isMe}
+        onReply={handleSwipeReply}
+        enabled={!!onReply}
+      >
+        {messageContent}
+      </SwipeableMessageBubble>
+    </View>
  );
 };

@@ -507,10 +509,6 @@ export const MessageBubble = React.memo(MessageBubbleInner, (prev, next) => {
  if (prev.currentUser !== next.currentUser) return false;
  if (prev.otherUser !== next.otherUser) return false;
  if (prev.messageMap !== next.messageMap) return false;
-  if (prev.onLongPress !== next.onLongPress) return false;
-  if (prev.onImagePress !== next.onImagePress) return false;
-  if (prev.onReplyPress !== next.onReplyPress) return false;
-  if (prev.shouldShowTime !== next.shouldShowTime) return false;
  return true;
 });

--- a/src/screens/message/components/ChatScreen/SegmentRenderer.tsx
+++ b/src/screens/message/components/ChatScreen/SegmentRenderer.tsx
@@ -359,8 +359,6 @@ const ImageSegment = React.memo(ImageSegmentInner, (prev, next) => {
  if (prev.data.width !== next.data.width) return false;
  if (prev.data.height !== next.data.height) return false;
  if (prev.isMe !== next.isMe) return false;
-  if (prev.onImagePress !== next.onImagePress) return false;
-  if (prev.onImageLongPress !== next.onImageLongPress) return false;
  return true;
 });

@@ -1174,12 +1172,6 @@ export const MessageSegmentsRenderer = React.memo(MessageSegmentsRendererInner,
  if (prev.currentUserId !== next.currentUserId) return false;
  if (prev.memberMap !== next.memberMap) return false;
  if (prev.replyMessage !== next.replyMessage) return false;
-  if (prev.onAtPress !== next.onAtPress) return false;
-  if (prev.onReplyPress !== next.onReplyPress) return false;
-  if (prev.onImagePress !== next.onImagePress) return false;
-  if (prev.onImageLongPress !== next.onImageLongPress) return false;
-  if (prev.onLinkPress !== next.onLinkPress) return false;
-  if (prev.getSenderInfo !== next.getSenderInfo) return false;
  return true;
 });