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
This commit is contained in:
@@ -9,11 +9,14 @@
|
||||
*/
|
||||
|
||||
import { create } from 'zustand';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import type {
|
||||
ConversationResponse,
|
||||
MessageResponse,
|
||||
} from '../../types/dto';
|
||||
|
||||
const LAST_SYSTEM_MESSAGE_AT_KEY = 'last_system_message_at';
|
||||
|
||||
// ==================== 状态接口 ====================
|
||||
|
||||
/**
|
||||
@@ -322,6 +325,11 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
|
||||
|
||||
setLastSystemMessageAt: (time: string | null) => {
|
||||
set({ lastSystemMessageAt: time });
|
||||
if (time) {
|
||||
AsyncStorage.setItem(LAST_SYSTEM_MESSAGE_AT_KEY, time).catch(() => {});
|
||||
} else {
|
||||
AsyncStorage.removeItem(LAST_SYSTEM_MESSAGE_AT_KEY).catch(() => {});
|
||||
}
|
||||
},
|
||||
|
||||
setSSEConnected: (connected: boolean) => {
|
||||
@@ -380,6 +388,14 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
|
||||
typingUsersMap: new Map(),
|
||||
mutedStatusMap: new Map(),
|
||||
});
|
||||
AsyncStorage.removeItem(LAST_SYSTEM_MESSAGE_AT_KEY).catch(() => {});
|
||||
},
|
||||
}));
|
||||
|
||||
export async function loadPersistedLastSystemMessageAt(): Promise<void> {
|
||||
const time = await AsyncStorage.getItem(LAST_SYSTEM_MESSAGE_AT_KEY);
|
||||
if (time) {
|
||||
useMessageStore.setState({ lastSystemMessageAt: time });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user