4963c9dcb5
- 新增个人页面标签和对应的页面文件 - 将标签栏布局从垂直改为水平排列 - 隐藏顶部标题栏以提供更简洁的界面 - 调整选中状态下的内边距和间距 - 将界面文本本地化为中文 - 在图标映射中添加person图标支持
122 lines
3.0 KiB
TypeScript
122 lines
3.0 KiB
TypeScript
import { SearchBox } from '@/components/SearchBox';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { ThemedView } from '@/components/ThemedView';
|
|
import { WorkoutCard } from '@/components/WorkoutCard';
|
|
import React from 'react';
|
|
import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
|
|
|
|
const workoutData = [
|
|
{
|
|
id: 1,
|
|
title: '体态评估',
|
|
duration: 50,
|
|
imageSource: require('@/assets/images/react-logo.png'),
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Hand\nTraining',
|
|
calories: 600,
|
|
duration: 40,
|
|
imageSource: require('@/assets/images/react-logo.png'),
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Core\nWorkout',
|
|
calories: 450,
|
|
duration: 35,
|
|
imageSource: require('@/assets/images/react-logo.png'),
|
|
},
|
|
];
|
|
|
|
export default function HomeScreen() {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea}>
|
|
<ThemedView style={styles.container}>
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
{/* Header Section */}
|
|
<View style={styles.header}>
|
|
<ThemedText style={styles.greeting}>Good Morning 🔥</ThemedText>
|
|
<ThemedText style={styles.userName}>Pramuditya Uzumaki</ThemedText>
|
|
</View>
|
|
|
|
{/* Search Box */}
|
|
<SearchBox placeholder="Search" />
|
|
|
|
{/* Popular Workouts Section */}
|
|
<View style={styles.sectionContainer}>
|
|
<ThemedText style={styles.sectionTitle}>Popular Workouts</ThemedText>
|
|
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.workoutScrollContainer}
|
|
style={styles.workoutScroll}
|
|
>
|
|
{workoutData.map((workout) => (
|
|
<WorkoutCard
|
|
key={workout.id}
|
|
title={workout.title}
|
|
calories={workout.calories}
|
|
duration={workout.duration}
|
|
imageSource={workout.imageSource}
|
|
onPress={() => console.log(`Pressed ${workout.title}`)}
|
|
/>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
|
|
{/* Add some spacing at the bottom */}
|
|
<View style={styles.bottomSpacing} />
|
|
</ScrollView>
|
|
</ThemedView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeArea: {
|
|
flex: 1,
|
|
backgroundColor: '#F7F8FA',
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#F7F8FA',
|
|
},
|
|
header: {
|
|
paddingHorizontal: 24,
|
|
paddingTop: 16,
|
|
paddingBottom: 8,
|
|
},
|
|
greeting: {
|
|
fontSize: 16,
|
|
color: '#8A8A8E',
|
|
fontWeight: '400',
|
|
marginBottom: 6,
|
|
},
|
|
userName: {
|
|
fontSize: 30,
|
|
fontWeight: 'bold',
|
|
color: '#1A1A1A',
|
|
lineHeight: 36,
|
|
},
|
|
sectionContainer: {
|
|
marginTop: 24,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: '#1A1A1A',
|
|
paddingHorizontal: 24,
|
|
marginBottom: 18,
|
|
},
|
|
workoutScroll: {
|
|
paddingLeft: 24,
|
|
},
|
|
workoutScrollContainer: {
|
|
paddingRight: 24,
|
|
},
|
|
bottomSpacing: {
|
|
height: 120,
|
|
},
|
|
});
|