feat: 优化个人中心页面
This commit is contained in:
richard
@@ -1,110 +1,387 @@
|
|||||||
import { Image } from 'expo-image';
|
import { Colors } from '@/constants/Colors';
|
||||||
import { Platform, StyleSheet } from 'react-native';
|
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';
|
export default function PersonalScreen() {
|
||||||
import { ExternalLink } from '@/components/ExternalLink';
|
const [notificationEnabled, setNotificationEnabled] = useState(true);
|
||||||
import ParallaxScrollView from '@/components/ParallaxScrollView';
|
const colorScheme = useColorScheme();
|
||||||
import { ThemedText } from '@/components/ThemedText';
|
const colors = Colors[colorScheme ?? 'light'];
|
||||||
import { ThemedView } from '@/components/ThemedView';
|
|
||||||
import { IconSymbol } from '@/components/ui/IconSymbol';
|
const ProfileHeader = () => (
|
||||||
|
<View style={styles.headerContainer}>
|
||||||
|
{/* 标题 */}
|
||||||
|
<Text style={styles.headerTitle}>Profile</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
const UserInfoSection = () => (
|
||||||
|
<View style={styles.userInfoCard}>
|
||||||
|
<View style={styles.userInfoContainer}>
|
||||||
|
{/* 头像 */}
|
||||||
|
<View style={styles.avatarContainer}>
|
||||||
|
<View style={styles.avatar}>
|
||||||
|
<View style={styles.avatarContent}>
|
||||||
|
{/* 简单的头像图标，您可以替换为实际图片 */}
|
||||||
|
<View style={styles.avatarIcon}>
|
||||||
|
<View style={styles.avatarFace} />
|
||||||
|
<View style={styles.avatarBody} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 用户信息 */}
|
||||||
|
<View style={styles.userDetails}>
|
||||||
|
<Text style={styles.userName}>Masi Ramezanzade</Text>
|
||||||
|
<Text style={styles.userProgram}>Lose a Fat Program</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 编辑按钮 */}
|
||||||
|
<TouchableOpacity style={dynamicStyles.editButton}>
|
||||||
|
<Text style={dynamicStyles.editButtonText}>Edit</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
const StatsSection = () => (
|
||||||
|
<View style={styles.statsContainer}>
|
||||||
|
<View style={styles.statItem}>
|
||||||
|
<Text style={dynamicStyles.statValue}>180cm</Text>
|
||||||
|
<Text style={styles.statLabel}>Height</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.statItem}>
|
||||||
|
<Text style={dynamicStyles.statValue}>65kg</Text>
|
||||||
|
<Text style={styles.statLabel}>Weight</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.statItem}>
|
||||||
|
<Text style={dynamicStyles.statValue}>22yo</Text>
|
||||||
|
<Text style={styles.statLabel}>Age</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
const MenuSection = ({ title, items }: { title: string; items: any[] }) => (
|
||||||
|
<View style={styles.menuSection}>
|
||||||
|
<Text style={styles.sectionTitle}>{title}</Text>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<TouchableOpacity key={index} style={styles.menuItem}>
|
||||||
|
<View style={styles.menuItemLeft}>
|
||||||
|
<View style={[styles.menuIcon]}>
|
||||||
|
<Ionicons name={item.icon} size={20} color={colors.primary} />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuItemText}>{item.title}</Text>
|
||||||
|
</View>
|
||||||
|
{item.type === 'switch' ? (
|
||||||
|
<Switch
|
||||||
|
value={notificationEnabled}
|
||||||
|
onValueChange={setNotificationEnabled}
|
||||||
|
trackColor={{ false: '#E5E5E5', true: colors.primary }}
|
||||||
|
thumbColor="#FFFFFF"
|
||||||
|
style={styles.switch}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Ionicons name="chevron-forward" size={20} color="#C4C4C4" />
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
// 动态创建样式
|
||||||
|
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 (
|
return (
|
||||||
<ParallaxScrollView
|
<View style={styles.container}>
|
||||||
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
|
<StatusBar barStyle="dark-content" backgroundColor="transparent" translucent />
|
||||||
headerImage={
|
<SafeAreaView style={styles.safeArea}>
|
||||||
<IconSymbol
|
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||||
size={310}
|
<ProfileHeader />
|
||||||
color="#808080"
|
<UserInfoSection />
|
||||||
name="chevron.left.forwardslash.chevron.right"
|
<StatsSection />
|
||||||
style={styles.headerImage}
|
<MenuSection title="Account" items={accountItems} />
|
||||||
/>
|
<MenuSection title="Notification" items={notificationItems} />
|
||||||
}>
|
<MenuSection title="Other" items={otherItems} />
|
||||||
<ThemedView style={styles.titleContainer}>
|
|
||||||
<ThemedText type="title">Explore</ThemedText>
|
{/* 底部浮动按钮 */}
|
||||||
</ThemedView>
|
<View style={styles.floatingButtonContainer}>
|
||||||
<ThemedText>This app includes example code to help you get started.</ThemedText>
|
<TouchableOpacity style={dynamicStyles.floatingButton}>
|
||||||
<Collapsible title="File-based routing">
|
<Ionicons name="search" size={24} color="#192126" />
|
||||||
<ThemedText>
|
</TouchableOpacity>
|
||||||
This app has two screens:{' '}
|
</View>
|
||||||
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
|
</ScrollView>
|
||||||
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
|
</SafeAreaView>
|
||||||
</ThemedText>
|
</View>
|
||||||
<ThemedText>
|
|
||||||
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
|
|
||||||
sets up the tab navigator.
|
|
||||||
</ThemedText>
|
|
||||||
<ExternalLink href="https://docs.expo.dev/router/introduction">
|
|
||||||
<ThemedText type="link">Learn more</ThemedText>
|
|
||||||
</ExternalLink>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Android, iOS, and web support">
|
|
||||||
<ThemedText>
|
|
||||||
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
|
|
||||||
</ThemedText>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Images">
|
|
||||||
<ThemedText>
|
|
||||||
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
|
|
||||||
different screen densities
|
|
||||||
</ThemedText>
|
|
||||||
<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
|
|
||||||
<ExternalLink href="https://reactnative.dev/docs/images">
|
|
||||||
<ThemedText type="link">Learn more</ThemedText>
|
|
||||||
</ExternalLink>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Custom fonts">
|
|
||||||
<ThemedText>
|
|
||||||
Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
|
|
||||||
<ThemedText style={{ fontFamily: 'SpaceMono' }}>
|
|
||||||
custom fonts such as this one.
|
|
||||||
</ThemedText>
|
|
||||||
</ThemedText>
|
|
||||||
<ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
|
|
||||||
<ThemedText type="link">Learn more</ThemedText>
|
|
||||||
</ExternalLink>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Light and dark mode components">
|
|
||||||
<ThemedText>
|
|
||||||
This template has light and dark mode support. The{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
|
|
||||||
what the user's current color scheme is, and so you can adjust UI colors accordingly.
|
|
||||||
</ThemedText>
|
|
||||||
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
|
|
||||||
<ThemedText type="link">Learn more</ThemedText>
|
|
||||||
</ExternalLink>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Animations">
|
|
||||||
<ThemedText>
|
|
||||||
This template includes an example of an animated component. The{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
|
|
||||||
the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
|
|
||||||
library to create a waving hand animation.
|
|
||||||
</ThemedText>
|
|
||||||
{Platform.select({
|
|
||||||
ios: (
|
|
||||||
<ThemedText>
|
|
||||||
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
|
|
||||||
component provides a parallax effect for the header image.
|
|
||||||
</ThemedText>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
</Collapsible>
|
|
||||||
</ParallaxScrollView>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
headerImage: {
|
container: {
|
||||||
color: '#808080',
|
flex: 1,
|
||||||
bottom: -90,
|
backgroundColor: '#F5F5F5', // 浅灰色背景
|
||||||
left: -35,
|
|
||||||
position: 'absolute',
|
|
||||||
},
|
},
|
||||||
titleContainer: {
|
safeArea: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
scrollView: {
|
||||||
|
flex: 1,
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
backgroundColor: '#F5F5F5',
|
||||||
|
},
|
||||||
|
// 头部导航
|
||||||
|
headerContainer: {
|
||||||
flexDirection: 'row',
|
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',
|
||||||
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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.
|
* 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';
|
const tintColorDark = '#fff';
|
||||||
|
|
||||||
export const Colors = {
|
export const Colors = {
|
||||||
@@ -11,16 +12,22 @@ export const Colors = {
|
|||||||
text: '#11181C',
|
text: '#11181C',
|
||||||
background: '#fff',
|
background: '#fff',
|
||||||
tint: tintColorLight,
|
tint: tintColorLight,
|
||||||
|
primary: primaryColor,
|
||||||
icon: '#687076',
|
icon: '#687076',
|
||||||
tabIconDefault: '#687076',
|
tabIconDefault: '#687076',
|
||||||
tabIconSelected: tintColorLight,
|
tabIconSelected: '#192126', // tab 激活时的文字/图标颜色（深色，在亮色背景上显示）
|
||||||
|
tabBarBackground: '#192126', // tab 栏背景色
|
||||||
|
tabBarActiveBackground: primaryColor, // tab 激活时的背景色
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
text: '#ECEDEE',
|
text: '#ECEDEE',
|
||||||
background: '#151718',
|
background: '#151718',
|
||||||
tint: tintColorDark,
|
tint: tintColorDark,
|
||||||
|
primary: primaryColor,
|
||||||
icon: '#9BA1A6',
|
icon: '#9BA1A6',
|
||||||
tabIconDefault: '#9BA1A6',
|
tabIconDefault: '#9BA1A6',
|
||||||
tabIconSelected: tintColorDark,
|
tabIconSelected: '#192126', // 在亮色背景上使用深色文字
|
||||||
|
tabBarBackground: '#192126',
|
||||||
|
tabBarActiveBackground: primaryColor,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user