feat: 更新依赖项并优化组件结构

- 在 package.json 和 package-lock.json 中新增 @sentry/react-native、react-native-device-info 和 react-native-purchases 依赖 - 更新统计页面，替换 CircularRing 组件为 FitnessRingsCard，增强健身数据展示 - 在布局文件中引入 ToastProvider，优化用户通知体验 - 新增 SuccessToast 组件，提供全局成功提示功能 - 更新健康数据获取逻辑，支持健身圆环数据的提取 - 优化多个组件的样式和交互，提升用户体验
2025-08-21 09:51:25 +08:00
parent 19b92547e1
commit 78620f18ee
21 changed files with 2494 additions and 108 deletions
--- a/components/ui/SuccessToast.tsx
+++ b/components/ui/SuccessToast.tsx
@@ -0,0 +1,114 @@
+import { getDeviceDimensions } from '@/utils/native.utils';
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const { ratio } = getDeviceDimensions();
+
+interface SuccessToastProps {
+  visible: boolean;
+  message: string;
+  duration?: number;
+  backgroundColor?: string;
+  textColor?: string;
+  icon?: string;
+  onHide?: () => void;
+}
+
+export default function SuccessToast({
+  visible,
+  message,
+  duration = 2000,
+  backgroundColor = '#DF42D0', // 默认使用应用主题色
+  textColor = '#FFFFFF',
+  icon = '✓',
+  onHide,
+}: SuccessToastProps) {
+  const animValue = useRef(new Animated.Value(0)).current;
+  const insets = useSafeAreaInsets();
+
+  useEffect(() => {
+    if (visible) {
+      // 入场动画
+      Animated.sequence([
+        Animated.timing(animValue, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        // 停留时间
+        Animated.delay(duration - 600), // 减去入场和退场动画时间
+        // 退场动画
+        Animated.timing(animValue, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        onHide?.();
+      });
+    }
+  }, [visible, duration, animValue, onHide]);
+
+  if (!visible) return null;
+
+  const translateY = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-(insets.top + 60), 0], // 从安全区域上方滑入
+  });
+
+  const opacity = animValue;
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          top: insets.top + 10 * ratio, // 动态计算顶部安全距离
+          transform: [{ translateY }],
+          opacity,
+        }
+      ]}
+    >
+      <View style={[styles.content, { backgroundColor }]}>
+        <Text style={[styles.icon, { color: textColor }]}>{icon}</Text>
+        <Text style={[styles.text, { color: textColor }]}>{message}</Text>
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    // top 将由组件内部动态计算
+    left: 15 * ratio,
+    right: 15 * ratio,
+    zIndex: 1000,
+    alignItems: 'center',
+  },
+  content: {
+    paddingVertical: 12 * ratio,
+    paddingHorizontal: 20 * ratio,
+    borderRadius: 25 * ratio,
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 10,
+  },
+  icon: {
+    fontSize: 16 * ratio,
+    fontWeight: 'bold',
+    marginRight: 8 * ratio,
+  },
+  text: {
+    fontSize: 14 * ratio,
+    fontWeight: '600',
+  },
+});