e6dfd4d59a
- 新增 fetchCompleteNutritionCardData 异步 action，统一拉取营养、健康与基础代谢数据 - NutritionRadarCard 改用 Redux 数据源，移除 props 透传，自动根据日期刷新 - BasalMetabolismCard 新增详情弹窗，展示 BMR 计算公式、正常区间及提升策略 - StepsCard 与 StepsCardOptimized 引入 InteractionManager 与动画懒加载，减少 UI 阻塞 - HealthKitManager 新增饮水读写接口，支持将饮水记录同步至 HealthKit - 移除 statistics 页面冗余 mock 与 nutrition/health 重复请求，缓存时间统一为 5 分钟
323 lines
8.7 KiB
TypeScript
323 lines
8.7 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import {
|
||
Animated,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
ViewStyle,
|
||
InteractionManager
|
||
} from 'react-native';
|
||
|
||
import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
|
||
import { logger } from '@/utils/logger';
|
||
import dayjs from 'dayjs';
|
||
import { Image } from 'expo-image';
|
||
import { useRouter } from 'expo-router';
|
||
import { AnimatedNumber } from './AnimatedNumber';
|
||
|
||
interface StepsCardProps {
|
||
curDate: Date
|
||
stepGoal: number;
|
||
style?: ViewStyle;
|
||
}
|
||
|
||
const StepsCardOptimized: React.FC<StepsCardProps> = ({
|
||
curDate,
|
||
style,
|
||
}) => {
|
||
const router = useRouter();
|
||
|
||
const [stepCount, setStepCount] = useState(0)
|
||
const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([])
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
|
||
// 优化：使用debounce减少频繁的数据获取
|
||
const debounceTimer = useRef<NodeJS.Timeout | null>(null);
|
||
|
||
const getStepData = useCallback(async (date: Date) => {
|
||
try {
|
||
setIsLoading(true);
|
||
logger.info('获取步数数据...');
|
||
|
||
// 先获取步数，立即更新UI
|
||
const steps = await fetchStepCount(date);
|
||
setStepCount(steps);
|
||
|
||
// 清除之前的定时器
|
||
if (debounceTimer.current) {
|
||
clearTimeout(debounceTimer.current);
|
||
}
|
||
|
||
// 使用 InteractionManager 在空闲时获取更复杂的小时数据
|
||
InteractionManager.runAfterInteractions(async () => {
|
||
try {
|
||
const hourly = await fetchHourlyStepSamples(date);
|
||
setHourSteps(hourly);
|
||
} catch (error) {
|
||
logger.error('获取小时步数数据失败:', error);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
});
|
||
|
||
} catch (error) {
|
||
logger.error('获取步数数据失败:', error);
|
||
setIsLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (curDate) {
|
||
getStepData(curDate);
|
||
}
|
||
}, [curDate, getStepData]);
|
||
|
||
// 优化：减少动画值数量，只为有数据的小时创建动画
|
||
const animatedValues = useRef<Map<number, Animated.Value>>(new Map()).current;
|
||
|
||
// 优化：简化柱状图数据计算，减少计算量
|
||
const chartData = useMemo(() => {
|
||
if (!hourlySteps || hourlySteps.length === 0) {
|
||
return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
|
||
}
|
||
|
||
// 优化：只计算有数据的小时的最大步数
|
||
const activeSteps = hourlySteps.filter(data => data.steps > 0);
|
||
if (activeSteps.length === 0) {
|
||
return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
|
||
}
|
||
|
||
const maxSteps = Math.max(...activeSteps.map(data => data.steps));
|
||
const maxHeight = 20;
|
||
|
||
return hourlySteps.map(data => ({
|
||
...data,
|
||
height: data.steps > 0 ? (data.steps / maxSteps) * maxHeight : 0
|
||
}));
|
||
}, [hourlySteps]);
|
||
|
||
// 获取当前小时
|
||
const currentHour = new Date().getHours();
|
||
|
||
// 优化：延迟执行动画，减少UI阻塞
|
||
useEffect(() => {
|
||
const hasData = chartData && chartData.length > 0 && chartData.some(data => data.steps > 0);
|
||
|
||
if (hasData && !isLoading) {
|
||
// 使用 InteractionManager 确保动画不会阻塞用户交互
|
||
InteractionManager.runAfterInteractions(() => {
|
||
// 只为有数据的小时创建和执行动画
|
||
const animations = chartData
|
||
.map((data, index) => {
|
||
if (data.steps > 0) {
|
||
// 懒创建动画值
|
||
if (!animatedValues.has(index)) {
|
||
animatedValues.set(index, new Animated.Value(0));
|
||
}
|
||
|
||
const animValue = animatedValues.get(index)!;
|
||
animValue.setValue(0);
|
||
|
||
// 使用更高性能的timing动画替代spring
|
||
return Animated.timing(animValue, {
|
||
toValue: 1,
|
||
duration: 200, // 减少动画时长
|
||
useNativeDriver: false,
|
||
});
|
||
}
|
||
return null;
|
||
})
|
||
.filter(Boolean) as Animated.CompositeAnimation[];
|
||
|
||
// 批量执行动画，提高性能
|
||
if (animations.length > 0) {
|
||
Animated.stagger(50, animations).start();
|
||
}
|
||
});
|
||
}
|
||
}, [chartData, animatedValues, isLoading]);
|
||
|
||
// 优化：使用React.memo包装复杂的渲染组件
|
||
const ChartBars = useMemo(() => {
|
||
return chartData.map((data, index) => {
|
||
// 判断是否是当前小时或者有活动的小时
|
||
const isActive = data.steps > 0;
|
||
const isCurrent = index <= currentHour;
|
||
|
||
// 优化：只为有数据的柱体创建动画插值
|
||
const animValue = animatedValues.get(index);
|
||
let animatedScale: Animated.AnimatedInterpolation<number> | undefined;
|
||
let animatedOpacity: Animated.AnimatedInterpolation<number> | undefined;
|
||
|
||
if (animValue && isActive) {
|
||
animatedScale = animValue.interpolate({
|
||
inputRange: [0, 1],
|
||
outputRange: [0, 1],
|
||
});
|
||
|
||
animatedOpacity = animValue.interpolate({
|
||
inputRange: [0, 1],
|
||
outputRange: [0, 1],
|
||
});
|
||
}
|
||
|
||
return (
|
||
<View key={`bar-container-${index}`} style={styles.barContainer}>
|
||
{/* 背景柱体 - 始终显示，使用相似色系的淡色 */}
|
||
<View
|
||
style={[
|
||
styles.chartBar,
|
||
{
|
||
height: 20, // 背景柱体占满整个高度
|
||
backgroundColor: isCurrent ? '#FFF4E6' : '#FFF8F0', // 更淡的相似色系
|
||
}
|
||
]}
|
||
/>
|
||
|
||
{/* 数据柱体 - 只有当有数据时才显示并执行动画 */}
|
||
{isActive && (
|
||
<Animated.View
|
||
style={[
|
||
styles.chartBar,
|
||
{
|
||
height: data.height,
|
||
backgroundColor: isCurrent ? '#FFC365' : '#FFEBCB',
|
||
transform: animatedScale ? [{ scaleY: animatedScale }] : undefined,
|
||
opacity: animatedOpacity || 1,
|
||
}
|
||
]}
|
||
/>
|
||
)}
|
||
</View>
|
||
);
|
||
});
|
||
}, [chartData, currentHour, animatedValues]);
|
||
|
||
const CardContent = () => (
|
||
<>
|
||
{/* 标题和步数显示 */}
|
||
<View style={styles.header}>
|
||
<Image
|
||
source={require('@/assets/images/icons/icon-step.png')}
|
||
style={styles.titleIcon}
|
||
/>
|
||
<Text style={styles.title}>步数</Text>
|
||
{isLoading && <Text style={styles.loadingText}>加载中...</Text>}
|
||
</View>
|
||
|
||
{/* 柱状图 */}
|
||
<View style={styles.chartContainer}>
|
||
<View style={styles.chartWrapper}>
|
||
<View style={styles.chartArea}>
|
||
{ChartBars}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 步数和目标显示 */}
|
||
<View style={styles.statsContainer}>
|
||
<AnimatedNumber
|
||
value={stepCount || 0}
|
||
style={styles.stepCount}
|
||
format={(v) => stepCount !== null ? `${Math.round(v)}` : '——'}
|
||
resetToken={stepCount}
|
||
/>
|
||
</View>
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<TouchableOpacity
|
||
style={[styles.container, style]}
|
||
onPress={() => {
|
||
// 传递当前日期参数到详情页
|
||
const dateParam = dayjs(curDate).format('YYYY-MM-DD');
|
||
router.push(`/steps/detail?date=${dateParam}`);
|
||
}}
|
||
activeOpacity={0.8}
|
||
>
|
||
<CardContent />
|
||
</TouchableOpacity>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
justifyContent: 'space-between',
|
||
borderRadius: 20,
|
||
padding: 16,
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 4,
|
||
},
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 20,
|
||
elevation: 8,
|
||
},
|
||
header: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
},
|
||
titleIcon: {
|
||
width: 16,
|
||
height: 16,
|
||
marginRight: 6,
|
||
resizeMode: 'contain',
|
||
},
|
||
title: {
|
||
fontSize: 14,
|
||
color: '#192126',
|
||
fontWeight: '600'
|
||
},
|
||
loadingText: {
|
||
fontSize: 10,
|
||
color: '#666',
|
||
marginLeft: 8,
|
||
},
|
||
chartContainer: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
marginTop: 6
|
||
},
|
||
chartWrapper: {
|
||
width: '100%',
|
||
alignItems: 'center',
|
||
},
|
||
chartArea: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-end',
|
||
height: 20,
|
||
width: '100%',
|
||
maxWidth: 240,
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: 4,
|
||
},
|
||
barContainer: {
|
||
width: 4,
|
||
height: 20,
|
||
alignItems: 'center',
|
||
justifyContent: 'flex-end',
|
||
position: 'relative',
|
||
},
|
||
chartBar: {
|
||
width: 4,
|
||
borderRadius: 1,
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
},
|
||
statsContainer: {
|
||
alignItems: 'flex-start',
|
||
marginTop: 6
|
||
},
|
||
stepCount: {
|
||
fontSize: 18,
|
||
fontWeight: '600',
|
||
color: '#192126',
|
||
},
|
||
});
|
||
|
||
export default StepsCardOptimized; |