feat(health): 重构营养卡片数据获取逻辑，支持基础代谢与运动消耗分离
- 新增 fetchCompleteNutritionCardData 异步 action，统一拉取营养、健康与基础代谢数据 - NutritionRadarCard 改用 Redux 数据源，移除 props 透传，自动根据日期刷新 - BasalMetabolismCard 新增详情弹窗，展示 BMR 计算公式、正常区间及提升策略 - StepsCard 与 StepsCardOptimized 引入 InteractionManager 与动画懒加载，减少 UI 阻塞 - HealthKitManager 新增饮水读写接口，支持将饮水记录同步至 HealthKit - 移除 statistics 页面冗余 mock 与 nutrition/health 重复请求，缓存时间统一为 5 分钟
This commit is contained in:
richarjiang
323
components/StepsCardOptimized.tsx
Normal file
323
components/StepsCardOptimized.tsx
Normal file
@@ -0,0 +1,323 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user