feat: 更新应用名称及图标,新增HRV数据管理,优化营养记录展示
This commit is contained in:
@@ -30,6 +30,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
export default function ExploreScreen() {
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
|
||||
const stepGoal = useAppSelector((s) => s.user.profile?.dailyStepsGoal) ?? 2000;
|
||||
const userProfile = useAppSelector((s) => s.user.profile);
|
||||
|
||||
@@ -68,6 +69,12 @@ export default function ExploreScreen() {
|
||||
// HealthKit: 每次页面聚焦都拉取今日数据
|
||||
const [stepCount, setStepCount] = useState<number | null>(null);
|
||||
const [activeCalories, setActiveCalories] = useState<number | null>(null);
|
||||
// 睡眠时长(分钟)
|
||||
const [sleepDuration, setSleepDuration] = useState<number | null>(null);
|
||||
// HRV数据
|
||||
const [hrvValue, setHrvValue] = useState<number>(69);
|
||||
const [hrvStatus, setHrvStatus] = useState<'放松' | '正常' | '紧张'>('正常');
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
// 用于触发动画重置的 token(当日期或数据变化时更新)
|
||||
const [animToken, setAnimToken] = useState(0);
|
||||
@@ -108,6 +115,21 @@ export default function ExploreScreen() {
|
||||
if (latestRequestKeyRef.current === requestKey) {
|
||||
setStepCount(data.steps);
|
||||
setActiveCalories(Math.round(data.activeEnergyBurned));
|
||||
setSleepDuration(data.sleepDuration);
|
||||
|
||||
// 模拟HRV数据(实际应用中应从HealthKit获取)
|
||||
const simulatedHrv = Math.floor(Math.random() * 80) + 30; // 30-110ms范围
|
||||
setHrvValue(simulatedHrv);
|
||||
|
||||
// 根据HRV值判断状态
|
||||
if (simulatedHrv >= 70) {
|
||||
setHrvStatus('放松');
|
||||
} else if (simulatedHrv >= 40) {
|
||||
setHrvStatus('正常');
|
||||
} else {
|
||||
setHrvStatus('紧张');
|
||||
}
|
||||
|
||||
setAnimToken((t) => t + 1);
|
||||
} else {
|
||||
console.log('忽略过期健康数据请求结果,key=', requestKey, '最新key=', latestRequestKeyRef.current);
|
||||
@@ -187,6 +209,61 @@ export default function ExploreScreen() {
|
||||
<Text style={styles.sectionTitle}>健康数据</Text>
|
||||
<WeightHistoryCard />
|
||||
|
||||
{/* HRV压力监测卡片 */}
|
||||
<View style={[styles.hrvCard, { backgroundColor: '#F0F7FF' }]}>
|
||||
<View style={styles.hrvHeader}>
|
||||
<View style={styles.hrvIconContainer}>
|
||||
<Ionicons name="heart" size={24} color="#3B82F6" />
|
||||
</View>
|
||||
<Text style={styles.hrvTitle}>压力监测</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.hrvContent}>
|
||||
<View style={styles.hrvValueContainer}>
|
||||
<Text style={styles.hrvValue}>{hrvValue}</Text>
|
||||
<Text style={styles.hrvUnit}>毫秒</Text>
|
||||
</View>
|
||||
|
||||
<View style={[styles.hrvStatus,
|
||||
hrvStatus === '放松' ? { backgroundColor: '#DCFCE7' } :
|
||||
hrvStatus === '正常' ? { backgroundColor: '#FEF3C7' } :
|
||||
{ backgroundColor: '#FEE2E2' }
|
||||
]}>
|
||||
<Text style={[styles.hrvStatusText,
|
||||
hrvStatus === '放松' ? { color: '#166534' } :
|
||||
hrvStatus === '正常' ? { color: '#92400E' } :
|
||||
{ color: '#991B1B' }
|
||||
]}>{hrvStatus}</Text>
|
||||
<Text style={styles.hrvEmoji}>
|
||||
{hrvStatus === '放松' ? '😌' :
|
||||
hrvStatus === '正常' ? '😊' :
|
||||
'😰'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.hrvSliderContainer}>
|
||||
<View style={styles.hrvSliderTrack}>
|
||||
<View style={[styles.hrvSliderProgress, {
|
||||
width: `${Math.min(100, Math.max(0, (hrvValue / 150) * 100))}%`,
|
||||
backgroundColor: hrvStatus === '放松' ? '#10B981' :
|
||||
hrvStatus === '正常' ? '#F59E0B' : '#EF4444'
|
||||
}]} />
|
||||
</View>
|
||||
<View style={styles.hrvLabels}>
|
||||
<Text style={styles.hrvLabel}>放松</Text>
|
||||
<Text style={styles.hrvLabel}>正常</Text>
|
||||
<Text style={styles.hrvLabel}>紧张</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 查看更多 */}
|
||||
<View style={styles.viewMoreContainer}>
|
||||
<Text style={styles.viewMoreText}>查看更多</Text>
|
||||
<Ionicons name="chevron-forward" size={16} color="#192126" style={styles.viewMoreIcon} />
|
||||
</View>
|
||||
|
||||
{/* 标题与日期选择 */}
|
||||
<Text style={styles.monthTitle}>{monthTitle}</Text>
|
||||
<ScrollView
|
||||
@@ -549,4 +626,114 @@ const styles = StyleSheet.create({
|
||||
padding: 4,
|
||||
marginLeft: 8,
|
||||
},
|
||||
viewMoreContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
viewMoreText: {
|
||||
fontSize: 14,
|
||||
color: '#192126',
|
||||
},
|
||||
viewMoreIcon: {
|
||||
fontSize: 16,
|
||||
color: '#192126',
|
||||
marginLeft: 4,
|
||||
},
|
||||
hrvCard: {
|
||||
backgroundColor: '#F0F7FF',
|
||||
borderRadius: 22,
|
||||
padding: 20,
|
||||
marginBottom: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 5,
|
||||
},
|
||||
hrvHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
hrvIconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#DBEAFE',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
hrvTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
color: '#1E293B',
|
||||
},
|
||||
hrvContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 20,
|
||||
},
|
||||
hrvValueContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
},
|
||||
hrvValue: {
|
||||
fontSize: 36,
|
||||
fontWeight: '800',
|
||||
color: '#1E293B',
|
||||
marginRight: 4,
|
||||
},
|
||||
hrvUnit: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#64748B',
|
||||
},
|
||||
hrvStatus: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#DCFCE7',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 20,
|
||||
},
|
||||
hrvStatusText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#166534',
|
||||
marginRight: 4,
|
||||
},
|
||||
hrvEmoji: {
|
||||
fontSize: 16,
|
||||
},
|
||||
hrvSliderContainer: {
|
||||
marginTop: 8,
|
||||
},
|
||||
hrvSliderTrack: {
|
||||
height: 8,
|
||||
backgroundColor: '#E2E8F0',
|
||||
borderRadius: 4,
|
||||
marginBottom: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
hrvSliderProgress: {
|
||||
height: '100%',
|
||||
backgroundColor: '#3B82F6',
|
||||
borderRadius: 4,
|
||||
},
|
||||
hrvLabels: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
hrvLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
color: '#64748B',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user