diff --git a/app/(tabs)/personal.tsx b/app/(tabs)/personal.tsx
index d4fbcaa..39431e8 100644
--- a/app/(tabs)/personal.tsx
+++ b/app/(tabs)/personal.tsx
@@ -1,110 +1,387 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { Ionicons } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import {
+ SafeAreaView,
+ ScrollView,
+ StatusBar,
+ StyleSheet,
+ Switch,
+ Text,
+ TouchableOpacity,
+ View
+} from 'react-native';
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
+export default function PersonalScreen() {
+ const [notificationEnabled, setNotificationEnabled] = useState(true);
+ const colorScheme = useColorScheme();
+ const colors = Colors[colorScheme ?? 'light'];
+
+ const ProfileHeader = () => (
+
+ {/* 标题 */}
+ Profile
+
+ );
+
+ const UserInfoSection = () => (
+
+
+ {/* 头像 */}
+
+
+
+ {/* 简单的头像图标，您可以替换为实际图片 */}
+
+
+
+
+
+
+
+
+ {/* 用户信息 */}
+
+ Masi Ramezanzade
+ Lose a Fat Program
+
+
+ {/* 编辑按钮 */}
+
+ Edit
+
+
+
+ );
+
+ const StatsSection = () => (
+
+
+ 180cm
+ Height
+
+
+ 65kg
+ Weight
+
+
+ 22yo
+ Age
+
+
+ );
+
+ const MenuSection = ({ title, items }: { title: string; items: any[] }) => (
+
+ {title}
+ {items.map((item, index) => (
+
+
+
+
+
+ {item.title}
+
+ {item.type === 'switch' ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+ );
+
+ // 动态创建样式
+ const dynamicStyles = {
+ editButton: {
+ backgroundColor: colors.primary,
+ paddingHorizontal: 20,
+ paddingVertical: 10,
+ borderRadius: 20,
+ },
+ editButtonText: {
+ color: '#192126',
+ fontSize: 14,
+ fontWeight: '600' as const,
+ },
+ statValue: {
+ fontSize: 18,
+ fontWeight: 'bold' as const,
+ color: colors.primary,
+ marginBottom: 4,
+ },
+ floatingButton: {
+ width: 56,
+ height: 56,
+ borderRadius: 28,
+ backgroundColor: colors.primary,
+ alignItems: 'center' as const,
+ justifyContent: 'center' as const,
+ shadowColor: colors.primary,
+ shadowOffset: {
+ width: 0,
+ height: 4,
+ },
+ shadowOpacity: 0.3,
+ shadowRadius: 8,
+ elevation: 8,
+ },
+ };
+
+ const accountItems = [
+ {
+ icon: 'person-outline',
+ iconBg: '#E8F5E8',
+ iconColor: '#4ADE80',
+ title: 'Personal Data',
+ },
+ {
+ icon: 'trophy-outline',
+ iconBg: '#E8F5E8',
+ iconColor: '#4ADE80',
+ title: 'Achievement',
+ },
+ {
+ icon: 'time-outline',
+ iconBg: '#E8F5E8',
+ iconColor: '#4ADE80',
+ title: 'Activity History',
+ },
+ {
+ icon: 'stats-chart-outline',
+ iconBg: '#E8F5E8',
+ iconColor: '#4ADE80',
+ title: 'Workout Progress',
+ },
+ ];
+
+ const notificationItems = [
+ {
+ icon: 'notifications-outline',
+ iconBg: '#E8F5E8',
+ iconColor: '#4ADE80',
+ title: 'Pop-up Notification',
+ type: 'switch',
+ },
+ ];
+
+ const otherItems = [
+ {
+ icon: 'mail-outline',
+ iconBg: '#E8F5E8',
+ iconColor: '#4ADE80',
+ title: 'Contact Us',
+ },
+ {
+ icon: 'shield-checkmark-outline',
+ iconBg: '#E8F5E8',
+ iconColor: '#4ADE80',
+ title: 'Privacy Policy',
+ },
+ {
+ icon: 'settings-outline',
+ iconBg: '#E8F5E8',
+ iconColor: '#4ADE80',
+ title: 'Settings',
+ },
+ ];
-export default function TabTwoScreen() {
return (
-
- }>
-
- Explore
-
- This app includes example code to help you get started.
-
-
- This app has two screens:{' '}
- app/(tabs)/index.tsx and{' '}
- app/(tabs)/explore.tsx
-
-
- The layout file in app/(tabs)/_layout.tsx{' '}
- sets up the tab navigator.
-
-
- Learn more
-
-
-
-
- You can open this project on Android, iOS, and the web. To open the web version, press{' '}
- w in the terminal running this project.
-
-
-
-
- For static images, you can use the @2x and{' '}
- @3x suffixes to provide files for
- different screen densities
-
-
-
- Learn more
-
-
-
-
- Open app/_layout.tsx to see how to load{' '}
-
- custom fonts such as this one.
-
-
-
- Learn more
-
-
-
-
- This template has light and dark mode support. The{' '}
- useColorScheme() hook lets you inspect
- what the user's current color scheme is, and so you can adjust UI colors accordingly.
-
-
- Learn more
-
-
-
-
- This template includes an example of an animated component. The{' '}
- components/HelloWave.tsx component uses
- the powerful react-native-reanimated{' '}
- library to create a waving hand animation.
-
- {Platform.select({
- ios: (
-
- The components/ParallaxScrollView.tsx{' '}
- component provides a parallax effect for the header image.
-
- ),
- })}
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {/* 底部浮动按钮 */}
+
+
+
+
+
+
+
+
);
}
const styles = StyleSheet.create({
- headerImage: {
- color: '#808080',
- bottom: -90,
- left: -35,
- position: 'absolute',
+ container: {
+ flex: 1,
+ backgroundColor: '#F5F5F5', // 浅灰色背景
},
- titleContainer: {
+ safeArea: {
+ flex: 1,
+ },
+ scrollView: {
+ flex: 1,
+ paddingHorizontal: 20,
+ backgroundColor: '#F5F5F5',
+ },
+ // 头部导航
+ headerContainer: {
flexDirection: 'row',
- gap: 8,
+ alignItems: 'center',
+ justifyContent: 'center',
+ paddingTop: 10,
+ paddingBottom: 20,
},
+
+ headerTitle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: '#000',
+ },
+
+ // 用户信息区域
+ userInfoCard: {
+ borderRadius: 16,
+ marginBottom: 20,
+ },
+ userInfoContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ padding: 20,
+ },
+ avatarContainer: {
+ marginRight: 15,
+ },
+ avatar: {
+ width: 80,
+ height: 80,
+ borderRadius: 40,
+ backgroundColor: '#E8D4F0',
+ alignItems: 'center',
+ justifyContent: 'center',
+ overflow: 'hidden',
+ },
+ avatarContent: {
+ width: '100%',
+ height: '100%',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ avatarIcon: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ avatarFace: {
+ width: 25,
+ height: 25,
+ borderRadius: 12.5,
+ backgroundColor: '#D4A574',
+ marginBottom: 5,
+ },
+ avatarBody: {
+ width: 30,
+ height: 20,
+ borderRadius: 15,
+ backgroundColor: '#F4C842',
+ },
+ userDetails: {
+ flex: 1,
+ },
+ userName: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: '#000',
+ marginBottom: 4,
+ },
+ userProgram: {
+ fontSize: 14,
+ color: '#888',
+ },
+
+ // 统计信息区域
+ statsContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ backgroundColor: '#FFFFFF',
+ borderRadius: 16,
+ padding: 20,
+ marginBottom: 20,
+ shadowColor: '#000',
+ shadowOffset: {
+ width: 0,
+ height: 2,
+ },
+ shadowOpacity: 0.1,
+ shadowRadius: 4,
+ elevation: 3,
+ },
+ statItem: {
+ alignItems: 'center',
+ flex: 1,
+ },
+
+ statLabel: {
+ fontSize: 12,
+ color: '#888',
+ },
+ // 菜单区域
+ menuSection: {
+ marginBottom: 20,
+ backgroundColor: '#FFFFFF',
+ padding: 16,
+ },
+ sectionTitle: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: '#000',
+ marginBottom: 12,
+ paddingHorizontal: 4,
+ },
+ menuItem: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ paddingVertical: 16,
+ paddingHorizontal: 16,
+ borderRadius: 12,
+ marginBottom: 8,
+ },
+ menuItemLeft: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ flex: 1,
+ },
+ menuIcon: {
+ width: 36,
+ height: 36,
+ borderRadius: 8,
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginRight: 12,
+ },
+ menuItemText: {
+ fontSize: 16,
+ color: '#000',
+ flex: 1,
+ },
+ switch: {
+ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
+ },
+ // 浮动按钮
+ floatingButtonContainer: {
+ position: 'absolute',
+ bottom: 30,
+ left: 0,
+ right: 0,
+ alignItems: 'center',
+ pointerEvents: 'box-none',
+ },
+
});
diff --git a/constants/Colors.ts b/constants/Colors.ts
index 14e6784..2fe3936 100644
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -3,7 +3,8 @@
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
*/
-const tintColorLight = '#0a7ea4';
+const primaryColor = '#BBF246'; // 应用主题色
+const tintColorLight = primaryColor;
const tintColorDark = '#fff';
export const Colors = {
@@ -11,16 +12,22 @@ export const Colors = {
text: '#11181C',
background: '#fff',
tint: tintColorLight,
+ primary: primaryColor,
icon: '#687076',
tabIconDefault: '#687076',
- tabIconSelected: tintColorLight,
+ tabIconSelected: '#192126', // tab 激活时的文字/图标颜色（深色，在亮色背景上显示）
+ tabBarBackground: '#192126', // tab 栏背景色
+ tabBarActiveBackground: primaryColor, // tab 激活时的背景色
},
dark: {
text: '#ECEDEE',
background: '#151718',
tint: tintColorDark,
+ primary: primaryColor,
icon: '#9BA1A6',
tabIconDefault: '#9BA1A6',
- tabIconSelected: tintColorDark,
+ tabIconSelected: '#192126', // 在亮色背景上使用深色文字
+ tabBarBackground: '#192126',
+ tabBarActiveBackground: primaryColor,
},
};