refactor(App, navigation): migrate to Expo Router and clean up navigation structure

- Updated App entry point to utilize Expo Router, simplifying the navigation setup.
- Removed legacy navigation components and services to streamline the codebase.
- Adjusted package.json to reflect the new entry point and updated dependencies for compatibility.
- Enhanced overall application structure by consolidating navigation logic and improving maintainability.

src/components/common/AppBackButton.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet } from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+import { borderRadius, colors, spacing } from '../../theme';
+
+type AppBackButtonIcon = 'arrow-left' | 'close';
+
+interface AppBackButtonProps {
+  onPress: () => void;
+  icon?: AppBackButtonIcon;
+  style?: StyleProp<ViewStyle>;
+  iconColor?: string;
+  backgroundColor?: string;
+  hitSlop?: number;
+  testID?: string;
+}
+
+const AppBackButton: React.FC<AppBackButtonProps> = ({
+  onPress,
+  icon = 'arrow-left',
+  style,
+  iconColor = colors.text.primary,
+  backgroundColor = colors.background.paper,
+  hitSlop = 8,
+  testID,
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.button, { backgroundColor }, style]}
+      activeOpacity={0.75}
+      hitSlop={hitSlop}
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={icon === 'close' ? '关闭' : '返回'}
+    >
+      <MaterialCommunityIcons name={icon} size={22} color={iconColor} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: borderRadius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: spacing.xs,
+  },
+});
+
+export default AppBackButton;

src/components/common/ImageGallery.tsx

@@ -87,6 +87,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
   const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isClosingRef = useRef(false);
   const currentIndexRef = useRef(initialIndex);
+  const pendingSwipeDirectionRef = useRef<-1 | 1 | null>(null);
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
   currentIndexRef.current = currentIndex;
   const [showControls, setShowControls] = useState(true);
@@ -173,6 +174,14 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     [validImages.length, onIndexChange]
   );
 
+  const updateIndexFromSwipe = useCallback(
+    (newIndex: number, direction: -1 | 1) => {
+      pendingSwipeDirectionRef.current = direction;
+      updateIndex(newIndex);
+    },
+    [updateIndex]
+  );
+
   const toggleControls = useCallback(() => {
     setShowControls(prev => !prev);
   }, []);
@@ -189,18 +198,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     }, 120);
   }, [onClose]);
 
-  const goToPrev = useCallback(() => {
-    if (currentIndex > 0) {
-      updateIndex(currentIndex - 1);
-    }
-  }, [currentIndex, updateIndex]);
-
-  const goToNext = useCallback(() => {
-    if (currentIndex < validImages.length - 1) {
-      updateIndex(currentIndex + 1);
-    }
-  }, [currentIndex, validImages.length, updateIndex]);
-
   // 显示短暂提示
   const showToast = useCallback((type: 'success' | 'error') => {
     setSaveToast(type);
@@ -269,6 +266,38 @@ 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 });
+  }, [currentIndex, swipeTranslateX]);
+
+  const switchWithDirection = useCallback(
+    (targetIndex: number, direction: -1 | 1) => {
+      swipeTranslateX.value = withTiming(direction * SCREEN_WIDTH, { duration: 200 }, () => {
+        runOnJS(updateIndexFromSwipe)(targetIndex, direction);
+      });
+    },
+    [swipeTranslateX, updateIndexFromSwipe]
+  );
+
+  const goToPrev = useCallback(() => {
+    if (currentIndex > 0) {
+      switchWithDirection(currentIndex - 1, 1);
+    }
+  }, [currentIndex, switchWithDirection]);
+
+  const goToNext = useCallback(() => {
+    if (currentIndex < validImages.length - 1) {
+      switchWithDirection(currentIndex + 1, -1);
+    }
+  }, [currentIndex, validImages.length, switchWithDirection]);
+
   // 统一的滑动手势：放大时拖动，未放大时切换图片
   const panGesture = Gesture.Pan()
     .activeOffsetX([-10, 10])  // 水平方向需要移动10pt才激活，避免与点击冲突
@@ -309,14 +338,12 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
         if (shouldGoNext && currentIndex < validImages.length - 1) {
           // 向左滑动，显示下一张
           swipeTranslateX.value = withTiming(-SCREEN_WIDTH, { duration: 200 }, () => {
-            runOnJS(updateIndex)(currentIndex + 1);
-            swipeTranslateX.value = 0;
+            runOnJS(updateIndexFromSwipe)(currentIndex + 1, -1);
           });
         } else if (shouldGoPrev && currentIndex > 0) {
           // 向右滑动，显示上一张
           swipeTranslateX.value = withTiming(SCREEN_WIDTH, { duration: 200 }, () => {
-            runOnJS(updateIndex)(currentIndex - 1);
-            swipeTranslateX.value = 0;
+            runOnJS(updateIndexFromSwipe)(currentIndex - 1, 1);
           });
         } else {
           // 回弹到原位

src/components/common/index.ts

@@ -16,6 +16,7 @@ export { default as ResponsiveContainer } from './ResponsiveContainer';
 export { default as ResponsiveGrid } from './ResponsiveGrid';
 export { default as ResponsiveStack, HStack, VStack } from './ResponsiveStack';
 export { default as AdaptiveLayout, SidebarLayout } from './AdaptiveLayout';
+export { default as AppBackButton } from './AppBackButton';
 
 // 图片相关组件
 export { default as SmartImage } from './SmartImage';