78620f18ee
- 在 package.json 和 package-lock.json 中新增 @sentry/react-native、react-native-device-info 和 react-native-purchases 依赖 - 更新统计页面，替换 CircularRing 组件为 FitnessRingsCard，增强健身数据展示 - 在布局文件中引入 ToastProvider，优化用户通知体验 - 新增 SuccessToast 组件，提供全局成功提示功能 - 更新健康数据获取逻辑，支持健身圆环数据的提取 - 优化多个组件的样式和交互，提升用户体验
114 lines
2.7 KiB
TypeScript
114 lines
2.7 KiB
TypeScript
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',
|
|
},
|
|
}); |