246 lines
8.2 KiB
TypeScript
246 lines
8.2 KiB
TypeScript
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,
|
||
},
|
||
}); |