4963c9dcb5
- 新增个人页面标签和对应的页面文件 - 将标签栏布局从垂直改为水平排列 - 隐藏顶部标题栏以提供更简洁的界面 - 调整选中状态下的内边距和间距 - 将界面文本本地化为中文 - 在图标映射中添加person图标支持
124 lines
2.9 KiB
TypeScript
124 lines
2.9 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import React from 'react';
|
|
import { ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface WorkoutCardProps {
|
|
title: string;
|
|
calories: number;
|
|
duration: number;
|
|
imageSource: any;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
export function WorkoutCard({ title, calories, duration, imageSource, onPress }: WorkoutCardProps) {
|
|
return (
|
|
<TouchableOpacity style={styles.container} onPress={onPress}>
|
|
<ImageBackground
|
|
source={imageSource}
|
|
style={styles.backgroundImage}
|
|
imageStyle={styles.imageStyle}
|
|
>
|
|
<View style={styles.overlay}>
|
|
<View style={styles.content}>
|
|
<View style={styles.textContainer}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
|
|
<View style={styles.statsContainer}>
|
|
{calories !== undefined && (
|
|
<View style={styles.statItem}>
|
|
<Ionicons name="flame-outline" size={16} color="#fff" />
|
|
<Text style={styles.statText}>{calories} Kcal</Text>
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.statItem}>
|
|
<Ionicons name="time-outline" size={16} color="#fff" />
|
|
<Text style={styles.statText}>{duration} Min</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<TouchableOpacity style={styles.playButton}>
|
|
<Ionicons name="play" size={24} color="#000" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</ImageBackground>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: 280,
|
|
height: 170,
|
|
marginRight: 16,
|
|
borderRadius: 20,
|
|
overflow: 'hidden',
|
|
},
|
|
backgroundImage: {
|
|
flex: 1,
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
imageStyle: {
|
|
borderRadius: 20,
|
|
},
|
|
overlay: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
|
borderRadius: 20,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-end',
|
|
padding: 18,
|
|
},
|
|
textContainer: {
|
|
flex: 1,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
color: '#fff',
|
|
marginBottom: 14,
|
|
lineHeight: 26,
|
|
},
|
|
statsContainer: {
|
|
flexDirection: 'column',
|
|
gap: 6,
|
|
},
|
|
statItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.25)',
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 5,
|
|
borderRadius: 15,
|
|
alignSelf: 'flex-start',
|
|
},
|
|
statText: {
|
|
color: '#fff',
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
marginLeft: 4,
|
|
},
|
|
playButton: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: '#A8E866',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 3,
|
|
},
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 5,
|
|
elevation: 6,
|
|
},
|
|
}); |