feat: 重构睡眠详情模块，扩展数据类型并引入独立组件以优化代码结构
This commit is contained in:
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