fix：修复心情日历无法打开的问题

components/MoodIntensitySlider.tsx

@@ -7,14 +7,13 @@ import {
   View,
 } from 'react-native';
 import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
+  Gesture,
+  GestureDetector,
 } from 'react-native-gesture-handler';
 import Animated, {
   interpolate,
   interpolateColor,
   runOnJS,
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
@@ -54,18 +53,18 @@ export default function MoodIntensitySlider({
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
   };
 
-  const gestureHandler = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    { startX: number; lastValue: number }
-  >({
-    onStart: (_, context) => {
-      context.startX = translateX.value;
-      context.lastValue = value;
+  const startX = useSharedValue(0);
+  const lastValue = useSharedValue(value);
+
+  const gestureHandler = Gesture.Pan()
+    .onBegin(() => {
+      startX.value = translateX.value;
+      lastValue.value = value;
       isDragging.value = withSpring(1);
       runOnJS(triggerHaptics)();
-    },
-    onActive: (event, context) => {
-      const newX = context.startX + event.translationX;
+    })
+    .onUpdate((event) => {
+      const newX = startX.value + event.translationX;
       const clampedX = Math.max(0, Math.min(sliderWidth, newX));
       translateX.value = clampedX;
 
@@ -73,13 +72,13 @@ export default function MoodIntensitySlider({
       const currentValue = Math.round((clampedX / sliderWidth) * (max - min) + min);
 
       // 当值改变时触发震动和回调
-      if (currentValue !== context.lastValue) {
-        context.lastValue = currentValue;
+      if (currentValue !== lastValue.value) {
+        lastValue.value = currentValue;
         runOnJS(triggerHaptics)();
         runOnJS(onValueChange)(currentValue);
       }
-    },
-    onEnd: () => {
+    })
+    .onEnd(() => {
       // 计算最终值并吸附到最近的步长
       const currentValue = Math.round((translateX.value / sliderWidth) * (max - min) + min);
       const snapPosition = ((currentValue - min) / (max - min)) * sliderWidth;
@@ -88,7 +87,6 @@ export default function MoodIntensitySlider({
       isDragging.value = withSpring(0);
       runOnJS(triggerHaptics)();
       runOnJS(onValueChange)(currentValue);
-    },
     });
 
   const thumbStyle = useAnimatedStyle(() => {
@@ -136,29 +134,6 @@ export default function MoodIntensitySlider({
     };
   });
 
-  // 动态颜色配置 - 根据进度变化颜色
-  const getProgressColors = (progress: number) => {
-    if (progress <= 0.25) {
-      return ['#22c55e', '#84cc16'] as const; // 绿色到浅绿色
-    } else if (progress <= 0.5) {
-      return ['#84cc16', '#eab308'] as const; // 浅绿色到黄色
-    } else if (progress <= 0.75) {
-      return ['#eab308', '#f97316'] as const; // 黄色到橙色
-    } else {
-      return ['#f97316', '#ef4444'] as const; // 橙色到红色
-    }
-  };
-
-  const progressColorsStyle = useAnimatedStyle(() => {
-    const progress = translateX.value / sliderWidth;
-    return {
-      backgroundColor: interpolateColor(
-        progress,
-        [0, 0.25, 0.5, 0.75, 1],
-        ['#22c55e', '#84cc16', '#eab308', '#f97316', '#ef4444']
-      ),
-    };
-  });
 
   return (
     <View style={styles.container}>
@@ -173,18 +148,19 @@ export default function MoodIntensitySlider({
           />
         </View>
 
-        {/* 进度条 - 动态颜色 */}
-        <Animated.View style={[styles.progress, { height }, progressStyle, progressColorsStyle]}>
+        {/* 进度条 - 动态渐变颜色 */}
+        <Animated.View style={[styles.progress, { height }, progressStyle]}>
           <LinearGradient
-            colors={getProgressColors(translateX.value / sliderWidth)}
+            colors={['#22c55e', '#84cc16', '#eab308', '#f97316', '#ef4444']}
+            locations={[0, 0.25, 0.5, 0.75, 1]}
             style={[styles.progressGradient, { height }]}
-            start={{ x: 1, y: 0 }}
-            end={{ x: 0, y: 0 }}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
           />
         </Animated.View>
 
         {/* 可拖拽的thumb */}
-        <PanGestureHandler onGestureEvent={gestureHandler}>
+        <GestureDetector gesture={gestureHandler}>
           <Animated.View style={[styles.thumb, { width: thumbSize, height: thumbSize }, thumbStyle]}>
             {/* <LinearGradient
               colors={['#ffffff', '#f8fafc']}
@@ -194,7 +170,7 @@ export default function MoodIntensitySlider({
             /> */}
             <Animated.View style={[styles.thumbInner, thumbInnerStyle]} />
           </Animated.View>
-        </PanGestureHandler>
+        </GestureDetector>
       </View>
 
       {/* 标签 */}