feat: 重构睡眠详情模块，扩展数据类型并引入独立组件以优化代码结构
This commit is contained in:
@@ -11,9 +11,6 @@ import { router } from 'expo-router';
|
|||||||
import React, { useCallback, useEffect, useState } from 'react';
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
Animated,
|
|
||||||
Modal,
|
|
||||||
Pressable,
|
|
||||||
ScrollView,
|
ScrollView,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
@@ -22,6 +19,8 @@ import {
|
|||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
|
||||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||||
|
import { InfoModal, type SleepDetailData } from '@/components/sleep/InfoModal';
|
||||||
|
import { SleepStagesInfoModal } from '@/components/sleep/SleepStagesInfoModal';
|
||||||
import { Colors } from '@/constants/Colors';
|
import { Colors } from '@/constants/Colors';
|
||||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||||
|
|
||||||
@@ -67,21 +66,11 @@ type HeartRateData = {
|
|||||||
value: number;
|
value: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 睡眠详情数据类型
|
// 睡眠详情数据类型从 InfoModal 组件导入，但需要扩展以包含其他字段
|
||||||
type SleepDetailData = {
|
type ExtendedSleepDetailData = SleepDetailData & {
|
||||||
sleepScore: number;
|
|
||||||
totalSleepTime: number;
|
|
||||||
sleepQualityPercentage: number;
|
|
||||||
bedtime: string;
|
|
||||||
wakeupTime: string;
|
|
||||||
timeInBed: number;
|
|
||||||
sleepStages: SleepStageStats[];
|
sleepStages: SleepStageStats[];
|
||||||
rawSleepSamples: SleepSample[];
|
rawSleepSamples: SleepSample[];
|
||||||
averageHeartRate: number | null;
|
|
||||||
sleepHeartRateData: HeartRateData[];
|
sleepHeartRateData: HeartRateData[];
|
||||||
sleepEfficiency: number;
|
|
||||||
qualityDescription: string;
|
|
||||||
recommendation: string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 工具函数
|
// 工具函数
|
||||||
@@ -349,7 +338,7 @@ const getSleepQualityInfo = (sleepScore: number): { description: string; recomme
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 主函数：获取完整的睡眠详情数据
|
// 主函数：获取完整的睡眠详情数据
|
||||||
const fetchSleepDetailData = async (date: Date): Promise<SleepDetailData | null> => {
|
const fetchSleepDetailData = async (date: Date): Promise<ExtendedSleepDetailData | null> => {
|
||||||
try {
|
try {
|
||||||
console.log('开始获取睡眠详情数据...', date);
|
console.log('开始获取睡眠详情数据...', date);
|
||||||
|
|
||||||
@@ -424,7 +413,7 @@ const fetchSleepDetailData = async (date: Date): Promise<SleepDetailData | null>
|
|||||||
console.log('睡眠得分:', sleepScore);
|
console.log('睡眠得分:', sleepScore);
|
||||||
console.log('========================');
|
console.log('========================');
|
||||||
|
|
||||||
const sleepDetailData: SleepDetailData = {
|
const sleepDetailData: ExtendedSleepDetailData = {
|
||||||
sleepScore,
|
sleepScore,
|
||||||
totalSleepTime,
|
totalSleepTime,
|
||||||
sleepQualityPercentage: sleepScore,
|
sleepQualityPercentage: sleepScore,
|
||||||
@@ -554,354 +543,16 @@ const SleepStageChart = ({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Sleep Grade Component 睡眠等级组件
|
// SleepGradeCard 组件现在在 InfoModal 组件内部
|
||||||
const SleepGradeCard = ({
|
|
||||||
icon,
|
|
||||||
grade,
|
|
||||||
range,
|
|
||||||
isActive = false
|
|
||||||
}: {
|
|
||||||
icon: string;
|
|
||||||
grade: string;
|
|
||||||
range: string;
|
|
||||||
isActive?: boolean;
|
|
||||||
}) => {
|
|
||||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
|
||||||
const colorTokens = Colors[theme];
|
|
||||||
|
|
||||||
const getGradeColor = (grade: string) => {
|
// SleepStagesInfoModal 组件现在从独立文件导入
|
||||||
switch (grade) {
|
|
||||||
case '低': case '较差': return { bg: '#FECACA', text: '#DC2626' };
|
|
||||||
case '正常': case '一般': return { bg: '#D1FAE5', text: '#065F46' };
|
|
||||||
case '良好': return { bg: '#D1FAE5', text: '#065F46' };
|
|
||||||
case '优秀': return { bg: '#FEF3C7', text: '#92400E' };
|
|
||||||
default: return { bg: colorTokens.pageBackgroundEmphasis, text: colorTokens.textSecondary };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const colors = getGradeColor(grade);
|
// InfoModal 组件现在从独立文件导入
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={[
|
|
||||||
styles.gradeCard,
|
|
||||||
{
|
|
||||||
backgroundColor: isActive ? colors.bg : colorTokens.pageBackgroundEmphasis,
|
|
||||||
borderColor: isActive ? colors.text : 'transparent',
|
|
||||||
}
|
|
||||||
]}>
|
|
||||||
<View style={styles.gradeCardLeft}>
|
|
||||||
<Ionicons name={icon as any} size={16} color={colors.text} />
|
|
||||||
<Text style={[
|
|
||||||
styles.gradeText,
|
|
||||||
{ color: isActive ? colors.text : colorTokens.textSecondary }
|
|
||||||
]}>
|
|
||||||
{grade}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
<Text style={[
|
|
||||||
styles.gradeRange,
|
|
||||||
{ color: isActive ? colors.text : colorTokens.textSecondary }
|
|
||||||
]}>
|
|
||||||
{range}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Sleep Stages Info Modal 组件
|
|
||||||
const SleepStagesInfoModal = ({
|
|
||||||
visible,
|
|
||||||
onClose
|
|
||||||
}: {
|
|
||||||
visible: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
}) => {
|
|
||||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
|
||||||
const colorTokens = Colors[theme];
|
|
||||||
const slideAnim = useState(new Animated.Value(0))[0];
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (visible) {
|
|
||||||
slideAnim.setValue(0);
|
|
||||||
Animated.spring(slideAnim, {
|
|
||||||
toValue: 1,
|
|
||||||
useNativeDriver: true,
|
|
||||||
tension: 100,
|
|
||||||
friction: 8,
|
|
||||||
}).start();
|
|
||||||
} else {
|
|
||||||
Animated.spring(slideAnim, {
|
|
||||||
toValue: 0,
|
|
||||||
useNativeDriver: true,
|
|
||||||
tension: 100,
|
|
||||||
friction: 8,
|
|
||||||
}).start();
|
|
||||||
}
|
|
||||||
}, [visible]);
|
|
||||||
|
|
||||||
const translateY = slideAnim.interpolate({
|
|
||||||
inputRange: [0, 1],
|
|
||||||
outputRange: [300, 0],
|
|
||||||
});
|
|
||||||
|
|
||||||
const opacity = slideAnim.interpolate({
|
|
||||||
inputRange: [0, 1],
|
|
||||||
outputRange: [0, 1],
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
transparent
|
|
||||||
visible={visible}
|
|
||||||
animationType="none"
|
|
||||||
onRequestClose={onClose}
|
|
||||||
>
|
|
||||||
<View style={styles.modalOverlay}>
|
|
||||||
<Pressable
|
|
||||||
style={StyleSheet.absoluteFillObject}
|
|
||||||
onPress={onClose}
|
|
||||||
/>
|
|
||||||
<Animated.View
|
|
||||||
style={[
|
|
||||||
styles.sleepStagesModalContent,
|
|
||||||
{
|
|
||||||
backgroundColor: colorTokens.background,
|
|
||||||
transform: [{ translateY }],
|
|
||||||
opacity,
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<View style={styles.sleepStagesModalInner}>
|
|
||||||
<View style={styles.modalHandle} />
|
|
||||||
|
|
||||||
<View style={styles.sleepStagesModalHeader}>
|
|
||||||
<Text style={[styles.sleepStagesModalTitle, { color: colorTokens.text }]}>
|
|
||||||
了解你的睡眠阶段
|
|
||||||
</Text>
|
|
||||||
<TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
|
|
||||||
<Ionicons name="close" size={24} color={colorTokens.textSecondary} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<ScrollView
|
|
||||||
style={styles.sleepStagesScrollView}
|
|
||||||
contentContainerStyle={styles.sleepStagesScrollContent}
|
|
||||||
showsVerticalScrollIndicator={false}
|
|
||||||
bounces={true}
|
|
||||||
scrollEnabled={true}
|
|
||||||
>
|
|
||||||
<Text style={[styles.sleepStagesDescription, { color: colorTokens.textSecondary }]}>
|
|
||||||
人们对睡眠阶段和睡眠质量有许多误解。有些人可能需要更多深度睡眠，其他人则不然。科学家和医生仍在探索不同睡眠阶段的作用及其对身体的影响。通过跟踪睡眠阶段并留意每天清晨的感受，你或许能深入了解自己的睡眠。
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{/* 清醒时间 */}
|
|
||||||
<View style={styles.sleepStageInfoCard}>
|
|
||||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
|
||||||
<View style={styles.sleepStageInfoTitleContainer}>
|
|
||||||
<View style={[styles.sleepStageDot, { backgroundColor: '#F59E0B' }]} />
|
|
||||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>清醒时间</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
|
||||||
一次睡眠期间，你可能会醒来几次。偶尔醒来很正常。可能你会立刻再次入睡，并不记得曾在夜间醒来。
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 快速动眼睡眠 */}
|
|
||||||
<View style={styles.sleepStageInfoCard}>
|
|
||||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
|
||||||
<View style={styles.sleepStageInfoTitleContainer}>
|
|
||||||
<View style={[styles.sleepStageDot, { backgroundColor: '#EC4899' }]} />
|
|
||||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>快速动眼睡眠</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
|
||||||
这一睡眠阶段可能对学习和记忆产生一定影响。在此阶段，你的肌肉最为放松，眼球也会快速左右移动。这也是你大多数梦境出现的阶段。
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 核心睡眠 */}
|
|
||||||
<View style={styles.sleepStageInfoCard}>
|
|
||||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
|
||||||
<View style={styles.sleepStageInfoTitleContainer}>
|
|
||||||
<View style={[styles.sleepStageDot, { backgroundColor: '#8B5CF6' }]} />
|
|
||||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>核心睡眠</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
|
||||||
这一阶段有时也称为浅睡期，与其他阶段一样重要。此阶段通常占据你每晚大部分的睡眠时间。对于认知至关重要的脑电波会在这一阶段产生。
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 深度睡眠 */}
|
|
||||||
<View style={styles.sleepStageInfoCard}>
|
|
||||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
|
||||||
<View style={styles.sleepStageInfoTitleContainer}>
|
|
||||||
<View style={[styles.sleepStageDot, { backgroundColor: '#3B82F6' }]} />
|
|
||||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>深度睡眠</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
|
||||||
因为脑电波的特征，这一阶段也称为慢波睡眠。在此阶段，身体组织得到修复，并释放重要荷尔蒙。它通常出现在睡眠的前半段，且持续时间较长。深度睡眠期间，身体非常放松，因此相较于其他阶段，你可能更难在此阶段醒来。
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
|
||||||
</Animated.View>
|
|
||||||
</View>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Info Modal 组件
|
|
||||||
const InfoModal = ({
|
|
||||||
visible,
|
|
||||||
onClose,
|
|
||||||
title,
|
|
||||||
type,
|
|
||||||
sleepData
|
|
||||||
}: {
|
|
||||||
visible: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
title: string;
|
|
||||||
type: 'sleep-time' | 'sleep-quality';
|
|
||||||
sleepData: SleepDetailData;
|
|
||||||
}) => {
|
|
||||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
|
||||||
const colorTokens = Colors[theme];
|
|
||||||
const slideAnim = useState(new Animated.Value(0))[0];
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (visible) {
|
|
||||||
// 重置动画值确保每次打开都有动画
|
|
||||||
slideAnim.setValue(0);
|
|
||||||
Animated.spring(slideAnim, {
|
|
||||||
toValue: 1,
|
|
||||||
useNativeDriver: true,
|
|
||||||
tension: 100,
|
|
||||||
friction: 8,
|
|
||||||
}).start();
|
|
||||||
} else {
|
|
||||||
Animated.spring(slideAnim, {
|
|
||||||
toValue: 0,
|
|
||||||
useNativeDriver: true,
|
|
||||||
tension: 100,
|
|
||||||
friction: 8,
|
|
||||||
}).start();
|
|
||||||
}
|
|
||||||
}, [visible]);
|
|
||||||
|
|
||||||
const translateY = slideAnim.interpolate({
|
|
||||||
inputRange: [0, 1],
|
|
||||||
outputRange: [300, 0],
|
|
||||||
});
|
|
||||||
|
|
||||||
const opacity = slideAnim.interpolate({
|
|
||||||
inputRange: [0, 1],
|
|
||||||
outputRange: [0, 1],
|
|
||||||
});
|
|
||||||
|
|
||||||
// 根据实际睡眠时间计算等级
|
|
||||||
const getSleepTimeGrade = (totalSleepMinutes: number) => {
|
|
||||||
const hours = totalSleepMinutes / 60;
|
|
||||||
if (hours < 6) return 0; // 低
|
|
||||||
if ((hours >= 6 && hours < 7) || hours > 9) return 1; // 正常
|
|
||||||
if (hours >= 7 && hours < 8) return 2; // 良好
|
|
||||||
if (hours >= 8 && hours <= 9) return 3; // 优秀
|
|
||||||
return 1; // 默认正常
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据实际睡眠质量百分比计算等级
|
|
||||||
const getSleepQualityGrade = (qualityPercentage: number) => {
|
|
||||||
if (qualityPercentage < 55) return 0; // 较差
|
|
||||||
if (qualityPercentage < 70) return 1; // 一般
|
|
||||||
if (qualityPercentage < 85) return 2; // 良好
|
|
||||||
return 3; // 优秀
|
|
||||||
};
|
|
||||||
|
|
||||||
const currentSleepTimeGrade = getSleepTimeGrade(sleepData.totalSleepTime || 443); // 默认7h23m
|
|
||||||
const currentSleepQualityGrade = getSleepQualityGrade(sleepData.sleepQualityPercentage || 94); // 默认94%
|
|
||||||
|
|
||||||
const sleepTimeGrades = [
|
|
||||||
{ icon: 'alert-circle-outline', grade: '低', range: '< 6h', isActive: currentSleepTimeGrade === 0 },
|
|
||||||
{ icon: 'checkmark-circle-outline', grade: '正常', range: '6h - 7h or > 9h', isActive: currentSleepTimeGrade === 1 },
|
|
||||||
{ icon: 'checkmark-circle', grade: '良好', range: '7h - 8h', isActive: currentSleepTimeGrade === 2 },
|
|
||||||
{ icon: 'star', grade: '优秀', range: '8h - 9h', isActive: currentSleepTimeGrade === 3 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const sleepQualityGrades = [
|
|
||||||
{ icon: 'alert-circle-outline', grade: '较差', range: '< 55%', isActive: currentSleepQualityGrade === 0 },
|
|
||||||
{ icon: 'checkmark-circle-outline', grade: '一般', range: '55% - 69%', isActive: currentSleepQualityGrade === 1 },
|
|
||||||
{ icon: 'checkmark-circle', grade: '良好', range: '70% - 84%', isActive: currentSleepQualityGrade === 2 },
|
|
||||||
{ icon: 'star', grade: '优秀', range: '85% - 100%', isActive: currentSleepQualityGrade === 3 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const currentGrades = type === 'sleep-time' ? sleepTimeGrades : sleepQualityGrades;
|
|
||||||
|
|
||||||
const getDescription = () => {
|
|
||||||
if (type === 'sleep-time') {
|
|
||||||
return '睡眠最重要 - 它占据了你睡眠得分的一半以上。长时间的睡眠可以减少睡眠债务，但是规律的睡眠时间对于高质量的休息至关重要。';
|
|
||||||
} else {
|
|
||||||
return '睡眠质量综合评估您的睡眠效率、深度睡眠时长、REM睡眠比例等多个指标。高质量的睡眠不仅仅取决于时长，还包括睡眠的连续性和各睡眠阶段的平衡。';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
transparent
|
|
||||||
visible={visible}
|
|
||||||
animationType="none"
|
|
||||||
onRequestClose={onClose}
|
|
||||||
>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.modalOverlay}
|
|
||||||
activeOpacity={1}
|
|
||||||
onPress={onClose}
|
|
||||||
>
|
|
||||||
<Animated.View style={[
|
|
||||||
styles.infoModalContent,
|
|
||||||
{
|
|
||||||
backgroundColor: colorTokens.background,
|
|
||||||
transform: [{ translateY }],
|
|
||||||
opacity,
|
|
||||||
}
|
|
||||||
]}>
|
|
||||||
<View style={styles.modalHandle} />
|
|
||||||
<View style={styles.infoModalHeader}>
|
|
||||||
<Text style={[styles.infoModalTitle, { color: colorTokens.text }]}>
|
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
<TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
|
|
||||||
<Ionicons name="close" size={20} color={colorTokens.textSecondary} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 等级卡片区域 */}
|
|
||||||
<View style={styles.gradesContainer}>
|
|
||||||
{currentGrades.map((grade, index) => (
|
|
||||||
<SleepGradeCard
|
|
||||||
key={index}
|
|
||||||
icon={grade.icon}
|
|
||||||
grade={grade.grade}
|
|
||||||
range={grade.range}
|
|
||||||
isActive={grade.isActive}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Text style={[styles.infoModalText, { color: colorTokens.textSecondary }]}>
|
|
||||||
{getDescription()}
|
|
||||||
</Text>
|
|
||||||
</Animated.View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function SleepDetailScreen() {
|
export default function SleepDetailScreen() {
|
||||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||||
const colorTokens = Colors[theme];
|
const colorTokens = Colors[theme];
|
||||||
const [sleepData, setSleepData] = useState<SleepDetailData | null>(null);
|
const [sleepData, setSleepData] = useState<ExtendedSleepDetailData | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [selectedDate] = useState(dayjs().toDate());
|
const [selectedDate] = useState(dayjs().toDate());
|
||||||
|
|
||||||
@@ -963,7 +614,7 @@ export default function SleepDetailScreen() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 如果没有数据，使用默认数据结构
|
// 如果没有数据，使用默认数据结构
|
||||||
const displayData: SleepDetailData = sleepData || {
|
const displayData: ExtendedSleepDetailData = sleepData || {
|
||||||
sleepScore: 0,
|
sleepScore: 0,
|
||||||
totalSleepTime: 0,
|
totalSleepTime: 0,
|
||||||
sleepQualityPercentage: 0,
|
sleepQualityPercentage: 0,
|
||||||
@@ -1586,81 +1237,7 @@ const styles = StyleSheet.create({
|
|||||||
color: '#9CA3AF',
|
color: '#9CA3AF',
|
||||||
fontStyle: 'italic',
|
fontStyle: 'italic',
|
||||||
},
|
},
|
||||||
// Info Modal 样式
|
// Info Modal 和 Grade Cards 样式已移动到独立组件中
|
||||||
modalOverlay: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
justifyContent: 'flex-end',
|
|
||||||
},
|
|
||||||
infoModalContent: {
|
|
||||||
borderTopLeftRadius: 24,
|
|
||||||
borderTopRightRadius: 24,
|
|
||||||
paddingTop: 12,
|
|
||||||
paddingHorizontal: 20,
|
|
||||||
paddingBottom: 34,
|
|
||||||
minHeight: 200,
|
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOffset: { width: 0, height: -4 },
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
shadowRadius: 16,
|
|
||||||
elevation: 8,
|
|
||||||
},
|
|
||||||
modalHandle: {
|
|
||||||
width: 36,
|
|
||||||
height: 4,
|
|
||||||
backgroundColor: '#D1D5DB',
|
|
||||||
borderRadius: 2,
|
|
||||||
alignSelf: 'center',
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
infoModalHeader: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
infoModalTitle: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: '700',
|
|
||||||
letterSpacing: -0.3,
|
|
||||||
},
|
|
||||||
infoModalCloseButton: {
|
|
||||||
padding: 4,
|
|
||||||
},
|
|
||||||
infoModalText: {
|
|
||||||
fontSize: 15,
|
|
||||||
lineHeight: 22,
|
|
||||||
letterSpacing: -0.1,
|
|
||||||
},
|
|
||||||
// Grade Cards 样式
|
|
||||||
gradesContainer: {
|
|
||||||
marginBottom: 20,
|
|
||||||
gap: 8,
|
|
||||||
},
|
|
||||||
gradeCard: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingVertical: 12,
|
|
||||||
borderRadius: 12,
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
gradeCardLeft: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 8,
|
|
||||||
},
|
|
||||||
gradeText: {
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: '600',
|
|
||||||
letterSpacing: -0.2,
|
|
||||||
},
|
|
||||||
gradeRange: {
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: '700',
|
|
||||||
letterSpacing: -0.3,
|
|
||||||
},
|
|
||||||
mockDataToggle: {
|
mockDataToggle: {
|
||||||
paddingHorizontal: 12,
|
paddingHorizontal: 12,
|
||||||
paddingVertical: 6,
|
paddingVertical: 6,
|
||||||
@@ -1798,73 +1375,7 @@ const styles = StyleSheet.create({
|
|||||||
height: '100%',
|
height: '100%',
|
||||||
borderRadius: 3,
|
borderRadius: 3,
|
||||||
},
|
},
|
||||||
// Sleep Stages Modal 样式
|
// Sleep Stages Modal 样式已移动到独立组件中
|
||||||
sleepStagesModalContent: {
|
|
||||||
borderTopLeftRadius: 24,
|
|
||||||
borderTopRightRadius: 24,
|
|
||||||
height: '80%',
|
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOffset: { width: 0, height: -4 },
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
shadowRadius: 16,
|
|
||||||
elevation: 8,
|
|
||||||
},
|
|
||||||
sleepStagesModalInner: {
|
|
||||||
flex: 1,
|
|
||||||
paddingTop: 12,
|
|
||||||
paddingHorizontal: 20,
|
|
||||||
paddingBottom: 34,
|
|
||||||
},
|
|
||||||
sleepStagesModalHeader: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
sleepStagesModalTitle: {
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: '700',
|
|
||||||
letterSpacing: -0.4,
|
|
||||||
},
|
|
||||||
sleepStagesScrollView: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
sleepStagesScrollContent: {
|
|
||||||
paddingBottom: 40,
|
|
||||||
},
|
|
||||||
sleepStagesDescription: {
|
|
||||||
fontSize: 15,
|
|
||||||
lineHeight: 22,
|
|
||||||
letterSpacing: -0.1,
|
|
||||||
marginBottom: 24,
|
|
||||||
},
|
|
||||||
sleepStageInfoCard: {
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
sleepStageInfoHeader: {
|
|
||||||
paddingBottom: 12,
|
|
||||||
marginBottom: 12,
|
|
||||||
},
|
|
||||||
sleepStageInfoTitleContainer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 12,
|
|
||||||
},
|
|
||||||
sleepStageDot: {
|
|
||||||
width: 12,
|
|
||||||
height: 12,
|
|
||||||
borderRadius: 6,
|
|
||||||
},
|
|
||||||
sleepStageInfoTitle: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: '600',
|
|
||||||
letterSpacing: -0.2,
|
|
||||||
},
|
|
||||||
sleepStageInfoContent: {
|
|
||||||
fontSize: 15,
|
|
||||||
lineHeight: 22,
|
|
||||||
letterSpacing: -0.1,
|
|
||||||
},
|
|
||||||
// 睡眠时间标签样式
|
// 睡眠时间标签样式
|
||||||
sleepTimeLabels: {
|
sleepTimeLabels: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
|
|||||||
307
components/sleep/InfoModal.tsx
Normal file
307
components/sleep/InfoModal.tsx
Normal file
@@ -0,0 +1,307 @@
|
|||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Animated,
|
||||||
|
Modal,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
|
import { Colors } from '@/constants/Colors';
|
||||||
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||||
|
|
||||||
|
// 睡眠详情数据类型
|
||||||
|
export type SleepDetailData = {
|
||||||
|
sleepScore: number;
|
||||||
|
totalSleepTime: number;
|
||||||
|
sleepQualityPercentage: number;
|
||||||
|
bedtime: string;
|
||||||
|
wakeupTime: string;
|
||||||
|
timeInBed: number;
|
||||||
|
sleepStages: any[];
|
||||||
|
rawSleepSamples: any[];
|
||||||
|
averageHeartRate: number | null;
|
||||||
|
sleepHeartRateData: any[];
|
||||||
|
sleepEfficiency: number;
|
||||||
|
qualityDescription: string;
|
||||||
|
recommendation: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Sleep Grade Component 睡眠等级组件
|
||||||
|
const SleepGradeCard = ({
|
||||||
|
icon,
|
||||||
|
grade,
|
||||||
|
range,
|
||||||
|
isActive = false
|
||||||
|
}: {
|
||||||
|
icon: string;
|
||||||
|
grade: string;
|
||||||
|
range: string;
|
||||||
|
isActive?: boolean;
|
||||||
|
}) => {
|
||||||
|
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||||
|
const colorTokens = Colors[theme];
|
||||||
|
|
||||||
|
const getGradeColor = (grade: string) => {
|
||||||
|
switch (grade) {
|
||||||
|
case '低': case '较差': return { bg: '#FECACA', text: '#DC2626' };
|
||||||
|
case '正常': case '一般': return { bg: '#D1FAE5', text: '#065F46' };
|
||||||
|
case '良好': return { bg: '#D1FAE5', text: '#065F46' };
|
||||||
|
case '优秀': return { bg: '#FEF3C7', text: '#92400E' };
|
||||||
|
default: return { bg: colorTokens.pageBackgroundEmphasis, text: colorTokens.textSecondary };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const colors = getGradeColor(grade);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[
|
||||||
|
styles.gradeCard,
|
||||||
|
{
|
||||||
|
backgroundColor: isActive ? colors.bg : colorTokens.pageBackgroundEmphasis,
|
||||||
|
borderColor: isActive ? colors.text : 'transparent',
|
||||||
|
}
|
||||||
|
]}>
|
||||||
|
<View style={styles.gradeCardLeft}>
|
||||||
|
<Ionicons name={icon as any} size={16} color={colors.text} />
|
||||||
|
<Text style={[
|
||||||
|
styles.gradeText,
|
||||||
|
{ color: isActive ? colors.text : colorTokens.textSecondary }
|
||||||
|
]}>
|
||||||
|
{grade}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={[
|
||||||
|
styles.gradeRange,
|
||||||
|
{ color: isActive ? colors.text : colorTokens.textSecondary }
|
||||||
|
]}>
|
||||||
|
{range}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Info Modal 组件
|
||||||
|
export const InfoModal = ({
|
||||||
|
visible,
|
||||||
|
onClose,
|
||||||
|
title,
|
||||||
|
type,
|
||||||
|
sleepData
|
||||||
|
}: {
|
||||||
|
visible: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
title: string;
|
||||||
|
type: 'sleep-time' | 'sleep-quality';
|
||||||
|
sleepData: SleepDetailData;
|
||||||
|
}) => {
|
||||||
|
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||||
|
const colorTokens = Colors[theme];
|
||||||
|
const slideAnim = useState(new Animated.Value(0))[0];
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (visible) {
|
||||||
|
// 重置动画值确保每次打开都有动画
|
||||||
|
slideAnim.setValue(0);
|
||||||
|
Animated.spring(slideAnim, {
|
||||||
|
toValue: 1,
|
||||||
|
useNativeDriver: true,
|
||||||
|
tension: 100,
|
||||||
|
friction: 8,
|
||||||
|
}).start();
|
||||||
|
} else {
|
||||||
|
Animated.spring(slideAnim, {
|
||||||
|
toValue: 0,
|
||||||
|
useNativeDriver: true,
|
||||||
|
tension: 100,
|
||||||
|
friction: 8,
|
||||||
|
}).start();
|
||||||
|
}
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
|
const translateY = slideAnim.interpolate({
|
||||||
|
inputRange: [0, 1],
|
||||||
|
outputRange: [300, 0],
|
||||||
|
});
|
||||||
|
|
||||||
|
const opacity = slideAnim.interpolate({
|
||||||
|
inputRange: [0, 1],
|
||||||
|
outputRange: [0, 1],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 根据实际睡眠时间计算等级
|
||||||
|
const getSleepTimeGrade = (totalSleepMinutes: number) => {
|
||||||
|
const hours = totalSleepMinutes / 60;
|
||||||
|
if (hours < 6) return 0; // 低
|
||||||
|
if ((hours >= 6 && hours < 7) || hours > 9) return 1; // 正常
|
||||||
|
if (hours >= 7 && hours < 8) return 2; // 良好
|
||||||
|
if (hours >= 8 && hours <= 9) return 3; // 优秀
|
||||||
|
return 1; // 默认正常
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据实际睡眠质量百分比计算等级
|
||||||
|
const getSleepQualityGrade = (qualityPercentage: number) => {
|
||||||
|
if (qualityPercentage < 55) return 0; // 较差
|
||||||
|
if (qualityPercentage < 70) return 1; // 一般
|
||||||
|
if (qualityPercentage < 85) return 2; // 良好
|
||||||
|
return 3; // 优秀
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentSleepTimeGrade = getSleepTimeGrade(sleepData.totalSleepTime || 443); // 默认7h23m
|
||||||
|
const currentSleepQualityGrade = getSleepQualityGrade(sleepData.sleepQualityPercentage || 94); // 默认94%
|
||||||
|
|
||||||
|
const sleepTimeGrades = [
|
||||||
|
{ icon: 'alert-circle-outline', grade: '低', range: '< 6h', isActive: currentSleepTimeGrade === 0 },
|
||||||
|
{ icon: 'checkmark-circle-outline', grade: '正常', range: '6h - 7h or > 9h', isActive: currentSleepTimeGrade === 1 },
|
||||||
|
{ icon: 'checkmark-circle', grade: '良好', range: '7h - 8h', isActive: currentSleepTimeGrade === 2 },
|
||||||
|
{ icon: 'star', grade: '优秀', range: '8h - 9h', isActive: currentSleepTimeGrade === 3 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const sleepQualityGrades = [
|
||||||
|
{ icon: 'alert-circle-outline', grade: '较差', range: '< 55%', isActive: currentSleepQualityGrade === 0 },
|
||||||
|
{ icon: 'checkmark-circle-outline', grade: '一般', range: '55% - 69%', isActive: currentSleepQualityGrade === 1 },
|
||||||
|
{ icon: 'checkmark-circle', grade: '良好', range: '70% - 84%', isActive: currentSleepQualityGrade === 2 },
|
||||||
|
{ icon: 'star', grade: '优秀', range: '85% - 100%', isActive: currentSleepQualityGrade === 3 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const currentGrades = type === 'sleep-time' ? sleepTimeGrades : sleepQualityGrades;
|
||||||
|
|
||||||
|
const getDescription = () => {
|
||||||
|
if (type === 'sleep-time') {
|
||||||
|
return '睡眠最重要 - 它占据了你睡眠得分的一半以上。长时间的睡眠可以减少睡眠债务，但是规律的睡眠时间对于高质量的休息至关重要。';
|
||||||
|
} else {
|
||||||
|
return '睡眠质量综合评估您的睡眠效率、深度睡眠时长、REM睡眠比例等多个指标。高质量的睡眠不仅仅取决于时长，还包括睡眠的连续性和各睡眠阶段的平衡。';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
transparent
|
||||||
|
visible={visible}
|
||||||
|
animationType="none"
|
||||||
|
onRequestClose={onClose}
|
||||||
|
>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.modalOverlay}
|
||||||
|
activeOpacity={1}
|
||||||
|
onPress={onClose}
|
||||||
|
>
|
||||||
|
<Animated.View style={[
|
||||||
|
styles.infoModalContent,
|
||||||
|
{
|
||||||
|
backgroundColor: colorTokens.background,
|
||||||
|
transform: [{ translateY }],
|
||||||
|
opacity,
|
||||||
|
}
|
||||||
|
]}>
|
||||||
|
<View style={styles.modalHandle} />
|
||||||
|
<View style={styles.infoModalHeader}>
|
||||||
|
<Text style={[styles.infoModalTitle, { color: colorTokens.text }]}>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
|
||||||
|
<Ionicons name="close" size={20} color={colorTokens.textSecondary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 等级卡片区域 */}
|
||||||
|
<View style={styles.gradesContainer}>
|
||||||
|
{currentGrades.map((grade, index) => (
|
||||||
|
<SleepGradeCard
|
||||||
|
key={index}
|
||||||
|
icon={grade.icon}
|
||||||
|
grade={grade.grade}
|
||||||
|
range={grade.range}
|
||||||
|
isActive={grade.isActive}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text style={[styles.infoModalText, { color: colorTokens.textSecondary }]}>
|
||||||
|
{getDescription()}
|
||||||
|
</Text>
|
||||||
|
</Animated.View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
// Info Modal 样式
|
||||||
|
modalOverlay: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
infoModalContent: {
|
||||||
|
borderTopLeftRadius: 24,
|
||||||
|
borderTopRightRadius: 24,
|
||||||
|
paddingTop: 12,
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
paddingBottom: 34,
|
||||||
|
minHeight: 200,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: -4 },
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
shadowRadius: 16,
|
||||||
|
elevation: 8,
|
||||||
|
},
|
||||||
|
modalHandle: {
|
||||||
|
width: 36,
|
||||||
|
height: 4,
|
||||||
|
backgroundColor: '#D1D5DB',
|
||||||
|
borderRadius: 2,
|
||||||
|
alignSelf: 'center',
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
infoModalHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 16,
|
||||||
|
},
|
||||||
|
infoModalTitle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: '700',
|
||||||
|
letterSpacing: -0.3,
|
||||||
|
},
|
||||||
|
infoModalCloseButton: {
|
||||||
|
padding: 4,
|
||||||
|
},
|
||||||
|
infoModalText: {
|
||||||
|
fontSize: 15,
|
||||||
|
lineHeight: 22,
|
||||||
|
letterSpacing: -0.1,
|
||||||
|
},
|
||||||
|
// Grade Cards 样式
|
||||||
|
gradesContainer: {
|
||||||
|
marginBottom: 20,
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
gradeCard: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 12,
|
||||||
|
borderRadius: 12,
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
gradeCardLeft: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
gradeText: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
letterSpacing: -0.2,
|
||||||
|
},
|
||||||
|
gradeRange: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '700',
|
||||||
|
letterSpacing: -0.3,
|
||||||
|
},
|
||||||
|
});
|
||||||
246
components/sleep/SleepStagesInfoModal.tsx
Normal file
246
components/sleep/SleepStagesInfoModal.tsx
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Animated,
|
||||||
|
Modal,
|
||||||
|
Pressable,
|
||||||
|
ScrollView,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
|
import { Colors } from '@/constants/Colors';
|
||||||
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||||
|
|
||||||
|
// Sleep Stages Info Modal 组件
|
||||||
|
export const SleepStagesInfoModal = ({
|
||||||
|
visible,
|
||||||
|
onClose
|
||||||
|
}: {
|
||||||
|
visible: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}) => {
|
||||||
|
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||||
|
const colorTokens = Colors[theme];
|
||||||
|
const slideAnim = useState(new Animated.Value(0))[0];
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (visible) {
|
||||||
|
slideAnim.setValue(0);
|
||||||
|
Animated.spring(slideAnim, {
|
||||||
|
toValue: 1,
|
||||||
|
useNativeDriver: true,
|
||||||
|
tension: 100,
|
||||||
|
friction: 8,
|
||||||
|
}).start();
|
||||||
|
} else {
|
||||||
|
Animated.spring(slideAnim, {
|
||||||
|
toValue: 0,
|
||||||
|
useNativeDriver: true,
|
||||||
|
tension: 100,
|
||||||
|
friction: 8,
|
||||||
|
}).start();
|
||||||
|
}
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
|
const translateY = slideAnim.interpolate({
|
||||||
|
inputRange: [0, 1],
|
||||||
|
outputRange: [300, 0],
|
||||||
|
});
|
||||||
|
|
||||||
|
const opacity = slideAnim.interpolate({
|
||||||
|
inputRange: [0, 1],
|
||||||
|
outputRange: [0, 1],
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
transparent
|
||||||
|
visible={visible}
|
||||||
|
animationType="none"
|
||||||
|
onRequestClose={onClose}
|
||||||
|
>
|
||||||
|
<View style={styles.modalOverlay}>
|
||||||
|
<Pressable
|
||||||
|
style={StyleSheet.absoluteFillObject}
|
||||||
|
onPress={onClose}
|
||||||
|
/>
|
||||||
|
<Animated.View
|
||||||
|
style={[
|
||||||
|
styles.sleepStagesModalContent,
|
||||||
|
{
|
||||||
|
backgroundColor: colorTokens.background,
|
||||||
|
transform: [{ translateY }],
|
||||||
|
opacity,
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<View style={styles.sleepStagesModalInner}>
|
||||||
|
<View style={styles.modalHandle} />
|
||||||
|
|
||||||
|
<View style={styles.sleepStagesModalHeader}>
|
||||||
|
<Text style={[styles.sleepStagesModalTitle, { color: colorTokens.text }]}>
|
||||||
|
了解你的睡眠阶段
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
|
||||||
|
<Ionicons name="close" size={24} color={colorTokens.textSecondary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<ScrollView
|
||||||
|
style={styles.sleepStagesScrollView}
|
||||||
|
contentContainerStyle={styles.sleepStagesScrollContent}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
bounces={true}
|
||||||
|
scrollEnabled={true}
|
||||||
|
>
|
||||||
|
<Text style={[styles.sleepStagesDescription, { color: colorTokens.textSecondary }]}>
|
||||||
|
人们对睡眠阶段和睡眠质量有许多误解。有些人可能需要更多深度睡眠，其他人则不然。科学家和医生仍在探索不同睡眠阶段的作用及其对身体的影响。通过跟踪睡眠阶段并留意每天清晨的感受，你或许能深入了解自己的睡眠。
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{/* 清醒时间 */}
|
||||||
|
<View style={styles.sleepStageInfoCard}>
|
||||||
|
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||||
|
<View style={styles.sleepStageInfoTitleContainer}>
|
||||||
|
<View style={[styles.sleepStageDot, { backgroundColor: '#F59E0B' }]} />
|
||||||
|
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>清醒时间</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||||
|
一次睡眠期间，你可能会醒来几次。偶尔醒来很正常。可能你会立刻再次入睡，并不记得曾在夜间醒来。
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 快速动眼睡眠 */}
|
||||||
|
<View style={styles.sleepStageInfoCard}>
|
||||||
|
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||||
|
<View style={styles.sleepStageInfoTitleContainer}>
|
||||||
|
<View style={[styles.sleepStageDot, { backgroundColor: '#EC4899' }]} />
|
||||||
|
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>快速动眼睡眠</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||||
|
这一睡眠阶段可能对学习和记忆产生一定影响。在此阶段，你的肌肉最为放松，眼球也会快速左右移动。这也是你大多数梦境出现的阶段。
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 核心睡眠 */}
|
||||||
|
<View style={styles.sleepStageInfoCard}>
|
||||||
|
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||||
|
<View style={styles.sleepStageInfoTitleContainer}>
|
||||||
|
<View style={[styles.sleepStageDot, { backgroundColor: '#8B5CF6' }]} />
|
||||||
|
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>核心睡眠</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||||
|
这一阶段有时也称为浅睡期，与其他阶段一样重要。此阶段通常占据你每晚大部分的睡眠时间。对于认知至关重要的脑电波会在这一阶段产生。
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 深度睡眠 */}
|
||||||
|
<View style={styles.sleepStageInfoCard}>
|
||||||
|
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||||
|
<View style={styles.sleepStageInfoTitleContainer}>
|
||||||
|
<View style={[styles.sleepStageDot, { backgroundColor: '#3B82F6' }]} />
|
||||||
|
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>深度睡眠</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||||
|
因为脑电波的特征，这一阶段也称为慢波睡眠。在此阶段，身体组织得到修复，并释放重要荷尔蒙。它通常出现在睡眠的前半段，且持续时间较长。深度睡眠期间，身体非常放松，因此相较于其他阶段，你可能更难在此阶段醒来。
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
</Animated.View>
|
||||||
|
</View>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
modalOverlay: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
modalHandle: {
|
||||||
|
width: 36,
|
||||||
|
height: 4,
|
||||||
|
backgroundColor: '#D1D5DB',
|
||||||
|
borderRadius: 2,
|
||||||
|
alignSelf: 'center',
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
infoModalCloseButton: {
|
||||||
|
padding: 4,
|
||||||
|
},
|
||||||
|
// Sleep Stages Modal 样式
|
||||||
|
sleepStagesModalContent: {
|
||||||
|
borderTopLeftRadius: 24,
|
||||||
|
borderTopRightRadius: 24,
|
||||||
|
height: '80%',
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: -4 },
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
shadowRadius: 16,
|
||||||
|
elevation: 8,
|
||||||
|
},
|
||||||
|
sleepStagesModalInner: {
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: 12,
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
paddingBottom: 34,
|
||||||
|
},
|
||||||
|
sleepStagesModalHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
sleepStagesModalTitle: {
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: '700',
|
||||||
|
letterSpacing: -0.4,
|
||||||
|
},
|
||||||
|
sleepStagesScrollView: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
sleepStagesScrollContent: {
|
||||||
|
paddingBottom: 40,
|
||||||
|
},
|
||||||
|
sleepStagesDescription: {
|
||||||
|
fontSize: 15,
|
||||||
|
lineHeight: 22,
|
||||||
|
letterSpacing: -0.1,
|
||||||
|
marginBottom: 24,
|
||||||
|
},
|
||||||
|
sleepStageInfoCard: {
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
sleepStageInfoHeader: {
|
||||||
|
paddingBottom: 12,
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
sleepStageInfoTitleContainer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 12,
|
||||||
|
},
|
||||||
|
sleepStageDot: {
|
||||||
|
width: 12,
|
||||||
|
height: 12,
|
||||||
|
borderRadius: 6,
|
||||||
|
},
|
||||||
|
sleepStageInfoTitle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: '600',
|
||||||
|
letterSpacing: -0.2,
|
||||||
|
},
|
||||||
|
sleepStageInfoContent: {
|
||||||
|
fontSize: 15,
|
||||||
|
lineHeight: 22,
|
||||||
|
letterSpacing: -0.1,
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user