8ffebfb297
- 在 Explore 页面中添加日期选择功能，允许用户查看指定日期的健康数据 - 重构健康数据获取逻辑，支持根据日期获取健康数据 - 在个人信息页面中集成用户资料编辑功能，支持姓名、性别、年龄、体重和身高的输入 - 新增 AnimatedNumber 和 CircularRing 组件，优化数据展示效果 - 更新 package.json 和 package-lock.json，添加 react-native-svg 依赖 - 修改布局以支持新功能的显示和交互
461 lines
12 KiB
TypeScript
461 lines
12 KiB
TypeScript
import { AnimatedNumber } from '@/components/AnimatedNumber';
|
||
import { CircularRing } from '@/components/CircularRing';
|
||
import { ProgressBar } from '@/components/ProgressBar';
|
||
import { Colors } from '@/constants/Colors';
|
||
import { getTabBarBottomPadding } from '@/constants/TabBar';
|
||
import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date';
|
||
import { ensureHealthPermissions, fetchHealthDataForDate, fetchTodayHealthData } from '@/utils/health';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
|
||
import { useFocusEffect } from '@react-navigation/native';
|
||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||
import {
|
||
SafeAreaView,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||
|
||
export default function ExploreScreen() {
|
||
// 使用 dayjs：当月日期与默认选中“今天”
|
||
const days = getMonthDaysZh();
|
||
const [selectedIndex, setSelectedIndex] = useState(getTodayIndexInMonth());
|
||
const tabBarHeight = useBottomTabBarHeight();
|
||
const insets = useSafeAreaInsets();
|
||
const bottomPadding = useMemo(() => {
|
||
return getTabBarBottomPadding(tabBarHeight) + (insets?.bottom ?? 0);
|
||
}, [tabBarHeight, insets?.bottom]);
|
||
|
||
const monthTitle = getMonthTitleZh();
|
||
|
||
// 日期条自动滚动到选中项
|
||
const daysScrollRef = useRef<import('react-native').ScrollView | null>(null);
|
||
const [scrollWidth, setScrollWidth] = useState(0);
|
||
const DAY_PILL_WIDTH = 68;
|
||
const DAY_PILL_SPACING = 12;
|
||
|
||
const scrollToIndex = (index: number, animated = true) => {
|
||
const baseOffset = index * (DAY_PILL_WIDTH + DAY_PILL_SPACING);
|
||
const centerOffset = Math.max(0, baseOffset - (scrollWidth / 2 - DAY_PILL_WIDTH / 2));
|
||
daysScrollRef.current?.scrollTo({ x: centerOffset, animated });
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (scrollWidth > 0) {
|
||
scrollToIndex(selectedIndex, false);
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [scrollWidth]);
|
||
|
||
// HealthKit: 每次页面聚焦都拉取今日数据
|
||
const [stepCount, setStepCount] = useState<number | null>(null);
|
||
const [activeCalories, setActiveCalories] = useState<number | null>(null);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
// 用于触发动画重置的 token（当日期或数据变化时更新）
|
||
const [animToken, setAnimToken] = useState(0);
|
||
const [trainingProgress, setTrainingProgress] = useState(0.8); // 暂定静态80%
|
||
|
||
const loadHealthData = async (targetDate?: Date) => {
|
||
try {
|
||
console.log('=== 开始HealthKit初始化流程 ===');
|
||
setIsLoading(true);
|
||
|
||
const ok = await ensureHealthPermissions();
|
||
if (!ok) {
|
||
const errorMsg = '无法获取健康权限，请确保在真实iOS设备上运行并授权应用访问健康数据';
|
||
console.warn(errorMsg);
|
||
return;
|
||
}
|
||
|
||
console.log('权限获取成功，开始获取健康数据...');
|
||
const data = targetDate ? await fetchHealthDataForDate(targetDate) : await fetchTodayHealthData();
|
||
|
||
console.log('设置UI状态:', data);
|
||
setStepCount(data.steps);
|
||
setActiveCalories(Math.round(data.activeEnergyBurned));
|
||
setAnimToken((t) => t + 1);
|
||
console.log('=== HealthKit数据获取完成 ===');
|
||
|
||
} catch (error) {
|
||
console.error('HealthKit流程出现异常:', error);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
useFocusEffect(
|
||
React.useCallback(() => {
|
||
loadHealthData();
|
||
}, [])
|
||
);
|
||
|
||
// 日期点击时，加载对应日期数据
|
||
const onSelectDate = (index: number) => {
|
||
setSelectedIndex(index);
|
||
scrollToIndex(index);
|
||
const target = days[index]?.date?.toDate();
|
||
if (target) {
|
||
loadHealthData(target);
|
||
}
|
||
};
|
||
|
||
|
||
return (
|
||
<View style={styles.container}>
|
||
<SafeAreaView style={styles.safeArea}>
|
||
<ScrollView
|
||
style={styles.scrollView}
|
||
contentContainerStyle={{ paddingBottom: bottomPadding }}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
{/* 标题与日期选择 */}
|
||
<Text style={styles.monthTitle}>{monthTitle}</Text>
|
||
<ScrollView
|
||
horizontal
|
||
showsHorizontalScrollIndicator={false}
|
||
contentContainerStyle={styles.daysContainer}
|
||
ref={daysScrollRef}
|
||
onLayout={(e) => setScrollWidth(e.nativeEvent.layout.width)}
|
||
>
|
||
{days.map((d, i) => {
|
||
const selected = i === selectedIndex;
|
||
return (
|
||
<View key={`${d.dayOfMonth}`} style={styles.dayItemWrapper}>
|
||
<TouchableOpacity
|
||
style={[styles.dayPill, selected ? styles.dayPillSelected : styles.dayPillNormal]}
|
||
onPress={() => onSelectDate(i)}
|
||
activeOpacity={0.8}
|
||
>
|
||
<Text style={[styles.dayLabel, selected && styles.dayLabelSelected]}> {d.weekdayZh} </Text>
|
||
<Text style={[styles.dayDate, selected && styles.dayDateSelected]}>{d.dayOfMonth}</Text>
|
||
</TouchableOpacity>
|
||
{selected && <View style={styles.selectedDot} />}
|
||
</View>
|
||
);
|
||
})}
|
||
</ScrollView>
|
||
|
||
{/* 今日报告 标题 */}
|
||
<Text style={styles.sectionTitle}>今日报告</Text>
|
||
|
||
{/* 取消卡片内 loading，保持静默刷新提升体验 */}
|
||
|
||
{/* 指标行：左大卡（训练时间），右两小卡（消耗卡路里、步数） */}
|
||
<View style={styles.metricsRow}>
|
||
<View style={[styles.trainingCard, styles.metricsLeft]}>
|
||
<Text style={styles.cardTitleSecondary}>训练时间</Text>
|
||
<View style={styles.trainingContent}>
|
||
<CircularRing
|
||
size={120}
|
||
strokeWidth={12}
|
||
trackColor="#E2D9FD"
|
||
progressColor="#8B74F3"
|
||
progress={trainingProgress}
|
||
resetToken={animToken}
|
||
/>
|
||
</View>
|
||
</View>
|
||
<View style={styles.metricsRight}>
|
||
<View style={[styles.metricsRightCard, styles.caloriesCard, { minHeight: 88 }]}>
|
||
<Text style={styles.cardTitleSecondary}>消耗卡路里</Text>
|
||
{activeCalories != null ? (
|
||
<AnimatedNumber
|
||
value={activeCalories}
|
||
resetToken={animToken}
|
||
style={styles.caloriesValue}
|
||
format={(v) => `${Math.round(v)} 千卡`}
|
||
/>
|
||
) : (
|
||
<Text style={styles.caloriesValue}>——</Text>
|
||
)}
|
||
</View>
|
||
<View style={[styles.metricsRightCard, styles.stepsCard, { minHeight: 88 }]}>
|
||
<View style={styles.cardHeaderRow}>
|
||
<View style={styles.iconSquare}><Ionicons name="footsteps-outline" size={18} color="#192126" /></View>
|
||
<Text style={styles.cardTitle}>步数</Text>
|
||
</View>
|
||
{stepCount != null ? (
|
||
<AnimatedNumber
|
||
value={stepCount}
|
||
resetToken={animToken}
|
||
style={styles.stepsValue}
|
||
format={(v) => `${Math.round(v)}/2000`}
|
||
/>
|
||
) : (
|
||
<Text style={styles.stepsValue}>——/2000</Text>
|
||
)}
|
||
<ProgressBar progress={Math.min(1, Math.max(0, (stepCount ?? 0) / 2000))} height={12} trackColor="#FFEBCB" fillColor="#FFC365" />
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const primary = Colors.light.primary;
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#F6F7F8',
|
||
},
|
||
safeArea: {
|
||
flex: 1,
|
||
},
|
||
scrollView: {
|
||
flex: 1,
|
||
paddingHorizontal: 20,
|
||
},
|
||
monthTitle: {
|
||
fontSize: 24,
|
||
fontWeight: '800',
|
||
color: '#192126',
|
||
marginTop: 8,
|
||
marginBottom: 14,
|
||
},
|
||
daysContainer: {
|
||
paddingBottom: 8,
|
||
},
|
||
dayItemWrapper: {
|
||
alignItems: 'center',
|
||
width: 68,
|
||
marginRight: 12,
|
||
},
|
||
dayPill: {
|
||
width: 68,
|
||
height: 68,
|
||
borderRadius: 18,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
dayPillNormal: {
|
||
backgroundColor: '#C8F852',
|
||
},
|
||
dayPillSelected: {
|
||
backgroundColor: '#192126',
|
||
},
|
||
dayLabel: {
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
color: '#192126',
|
||
marginBottom: 2,
|
||
},
|
||
dayLabelSelected: {
|
||
color: '#FFFFFF',
|
||
},
|
||
dayDate: {
|
||
fontSize: 16,
|
||
fontWeight: '800',
|
||
color: '#192126',
|
||
},
|
||
dayDateSelected: {
|
||
color: '#FFFFFF',
|
||
},
|
||
selectedDot: {
|
||
width: 8,
|
||
height: 8,
|
||
borderRadius: 4,
|
||
backgroundColor: '#192126',
|
||
marginTop: 10,
|
||
marginBottom: 4,
|
||
alignSelf: 'center',
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 24,
|
||
fontWeight: '800',
|
||
color: '#192126',
|
||
marginTop: 24,
|
||
marginBottom: 14,
|
||
},
|
||
metricsRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 16,
|
||
},
|
||
card: {
|
||
backgroundColor: '#0F1418',
|
||
borderRadius: 22,
|
||
padding: 18,
|
||
marginBottom: 16,
|
||
},
|
||
metricsLeft: {
|
||
flex: 1,
|
||
backgroundColor: '#EEE9FF',
|
||
borderRadius: 22,
|
||
padding: 18,
|
||
marginRight: 12,
|
||
},
|
||
metricsRight: {
|
||
width: 160,
|
||
gap: 12,
|
||
},
|
||
metricsRightCard: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 22,
|
||
padding: 16,
|
||
},
|
||
caloriesCard: {
|
||
backgroundColor: '#FFFFFF',
|
||
},
|
||
trainingCard: {
|
||
backgroundColor: '#EEE9FF',
|
||
},
|
||
|
||
cardTitleSecondary: {
|
||
color: '#9AA3AE',
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
marginBottom: 10,
|
||
},
|
||
caloriesValue: {
|
||
color: '#192126',
|
||
fontSize: 22,
|
||
fontWeight: '800',
|
||
},
|
||
trainingContent: {
|
||
marginTop: 8,
|
||
width: 120,
|
||
height: 120,
|
||
borderRadius: 60,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
alignSelf: 'center',
|
||
},
|
||
trainingRingTrack: {
|
||
position: 'absolute',
|
||
width: '100%',
|
||
height: '100%',
|
||
borderRadius: 60,
|
||
borderWidth: 12,
|
||
borderColor: '#E2D9FD',
|
||
},
|
||
trainingRingProgress: {
|
||
position: 'absolute',
|
||
width: '100%',
|
||
height: '100%',
|
||
borderRadius: 60,
|
||
borderWidth: 12,
|
||
borderColor: 'transparent',
|
||
borderTopColor: '#8B74F3',
|
||
borderRightColor: '#8B74F3',
|
||
transform: [{ rotateZ: '45deg' }],
|
||
},
|
||
trainingPercent: {
|
||
fontSize: 18,
|
||
fontWeight: '800',
|
||
color: '#8B74F3',
|
||
},
|
||
cyclingHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 12,
|
||
},
|
||
cyclingIconBadge: {
|
||
width: 30,
|
||
height: 30,
|
||
borderRadius: 6,
|
||
backgroundColor: primary,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 8,
|
||
},
|
||
cyclingTitle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 20,
|
||
fontWeight: '800',
|
||
},
|
||
mapArea: {
|
||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||
borderRadius: 14,
|
||
height: 180,
|
||
padding: 8,
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
overflow: 'hidden',
|
||
},
|
||
mapTile: {
|
||
width: '25%',
|
||
height: '25%',
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(255,255,255,0.12)',
|
||
},
|
||
routeLine: {
|
||
position: 'absolute',
|
||
height: 6,
|
||
backgroundColor: primary,
|
||
borderRadius: 3,
|
||
},
|
||
cardHeaderRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 12,
|
||
},
|
||
iconSquare: {
|
||
width: 30,
|
||
height: 30,
|
||
borderRadius: 8,
|
||
backgroundColor: '#FFFFFF',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 10,
|
||
},
|
||
cardTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '800',
|
||
color: '#192126',
|
||
},
|
||
heartCard: {
|
||
backgroundColor: '#FFE5E5',
|
||
},
|
||
waveContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-end',
|
||
height: 70,
|
||
gap: 6,
|
||
marginBottom: 8,
|
||
},
|
||
waveBar: {
|
||
width: 6,
|
||
borderRadius: 3,
|
||
backgroundColor: '#E54D4D',
|
||
},
|
||
heartValue: {
|
||
alignSelf: 'flex-end',
|
||
color: '#5B5B5B',
|
||
fontWeight: '600',
|
||
},
|
||
stepsCard: {
|
||
backgroundColor: '#FFE4B8',
|
||
},
|
||
stepsValue: {
|
||
fontSize: 16,
|
||
color: '#7A6A42',
|
||
fontWeight: '700',
|
||
marginBottom: 8,
|
||
},
|
||
errorContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: '#FFE5E5',
|
||
borderRadius: 12,
|
||
padding: 12,
|
||
marginBottom: 16,
|
||
},
|
||
errorText: {
|
||
fontSize: 14,
|
||
color: '#E54D4D',
|
||
fontWeight: '600',
|
||
marginLeft: 8,
|
||
flex: 1,
|
||
},
|
||
retryButton: {
|
||
padding: 4,
|
||
marginLeft: 8,
|
||
},
|
||
});
|