feat: 添加训练计划和打卡功能
- 新增训练计划页面,允许用户制定个性化的训练计划 - 集成打卡功能,用户可以记录每日的训练情况 - 更新 Redux 状态管理,添加训练计划相关的 reducer - 在首页中添加训练计划卡片,支持用户点击跳转 - 更新样式和布局,以适应新功能的展示和交互 - 添加日期选择器和相关依赖,支持用户选择训练日期
This commit is contained in:
86
components/ui/HeaderBar.tsx
Normal file
86
components/ui/HeaderBar.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
|
||||
export type HeaderBarProps = {
|
||||
title: string | React.ReactNode;
|
||||
onBack?: () => void;
|
||||
right?: React.ReactNode;
|
||||
tone?: 'light' | 'dark';
|
||||
showBottomBorder?: boolean;
|
||||
withSafeTop?: boolean;
|
||||
transparent?: boolean;
|
||||
};
|
||||
|
||||
export function HeaderBar({
|
||||
title,
|
||||
onBack,
|
||||
right,
|
||||
tone,
|
||||
showBottomBorder = false,
|
||||
withSafeTop = true,
|
||||
transparent = true,
|
||||
}: HeaderBarProps) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const colorScheme = useColorScheme() ?? 'light';
|
||||
const theme = Colors[tone ?? colorScheme];
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.header,
|
||||
{
|
||||
paddingTop: (withSafeTop ? insets.top : 0) + 8,
|
||||
backgroundColor: transparent ? 'transparent' : theme.card,
|
||||
borderBottomWidth: showBottomBorder ? 1 : 0,
|
||||
borderBottomColor: theme.border,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{onBack ? (
|
||||
<TouchableOpacity accessibilityRole="button" onPress={onBack} style={[styles.backButton, { backgroundColor: 'rgba(187,242,70,0.2)' }]}>
|
||||
<Ionicons name="chevron-back" size={20} color={theme.onPrimary} />
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<View style={{ width: 32 }} />
|
||||
)}
|
||||
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
||||
{typeof title === 'string' ? (
|
||||
<Text style={[styles.title, { color: theme.text }]}>{title}</Text>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
</View>
|
||||
|
||||
{right ?? <View style={{ width: 32 }} />}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
backButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: '800',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user