richarjiang
7d28b79d86
- 在项目中引入expo-notifications库，支持本地推送通知功能 - 实现通知权限管理，用户可选择开启或关闭通知 - 新增通知发送、定时通知和重复通知功能 - 更新个人页面，集成通知开关和权限请求逻辑 - 编写推送通知功能实现文档，详细描述功能和使用方法 - 优化心情日历页面，确保数据实时刷新
409 lines
11 KiB
TypeScript
409 lines
11 KiB
TypeScript
import ActivityHeatMap from '@/components/ActivityHeatMap';
|
|
import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
|
|
import { Colors } from '@/constants/Colors';
|
|
import { getTabBarBottomPadding } from '@/constants/TabBar';
|
|
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
|
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
import { useNotifications } from '@/hooks/useNotifications';
|
|
import { DEFAULT_MEMBER_NAME, fetchActivityHistory, fetchMyProfile } from '@/store/userSlice';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
|
|
import { useFocusEffect } from '@react-navigation/native';
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import { Alert, Image, Linking, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
const DEFAULT_AVATAR_URL = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/avatar/avatarGirl01.jpeg';
|
|
|
|
export default function PersonalScreen() {
|
|
const dispatch = useAppDispatch();
|
|
const { confirmLogout, confirmDeleteAccount, isLoggedIn, pushIfAuthedElseLogin } = useAuthGuard();
|
|
const insets = useSafeAreaInsets();
|
|
const tabBarHeight = useBottomTabBarHeight();
|
|
const colorScheme = useColorScheme();
|
|
|
|
// 推送通知相关
|
|
const {
|
|
isInitialized,
|
|
permissionStatus,
|
|
requestPermission,
|
|
sendNotification,
|
|
} = useNotifications();
|
|
|
|
const [notificationEnabled, setNotificationEnabled] = useState(false);
|
|
|
|
// 计算底部间距
|
|
const bottomPadding = useMemo(() => {
|
|
return getTabBarBottomPadding(tabBarHeight) + (insets?.bottom ?? 0);
|
|
}, [tabBarHeight, insets?.bottom]);
|
|
|
|
// 颜色主题
|
|
const colors = Colors[colorScheme ?? 'light'];
|
|
|
|
// 直接使用 Redux 中的用户信息，避免重复状态管理
|
|
const userProfile = useAppSelector((state) => state.user.profile);
|
|
|
|
// 页面聚焦时获取最新用户信息
|
|
useFocusEffect(
|
|
React.useCallback(() => {
|
|
dispatch(fetchMyProfile());
|
|
dispatch(fetchActivityHistory())
|
|
}, [dispatch])
|
|
);
|
|
|
|
// 数据格式化函数
|
|
const formatHeight = () => {
|
|
if (userProfile.height == null) return '--';
|
|
return `${parseFloat(userProfile.height).toFixed(1)}cm`;
|
|
};
|
|
|
|
const formatWeight = () => {
|
|
if (userProfile.weight == null) return '--';
|
|
return `${parseFloat(userProfile.weight).toFixed(1)}kg`;
|
|
};
|
|
|
|
const formatAge = () => {
|
|
if (!userProfile.birthDate) return '--';
|
|
const birthDate = new Date(userProfile.birthDate);
|
|
const today = new Date();
|
|
const age = today.getFullYear() - birthDate.getFullYear();
|
|
return `${age}岁`;
|
|
};
|
|
|
|
// 显示名称
|
|
const displayName = (userProfile.name?.trim()) ? userProfile.name : DEFAULT_MEMBER_NAME;
|
|
|
|
// 监听通知权限状态变化
|
|
useEffect(() => {
|
|
if (permissionStatus === 'granted') {
|
|
setNotificationEnabled(true);
|
|
} else {
|
|
setNotificationEnabled(false);
|
|
}
|
|
}, [permissionStatus]);
|
|
|
|
// 处理通知开关变化
|
|
const handleNotificationToggle = async (value: boolean) => {
|
|
if (value) {
|
|
try {
|
|
const status = await requestPermission();
|
|
if (status === 'granted') {
|
|
setNotificationEnabled(true);
|
|
// 发送测试通知
|
|
await sendNotification({
|
|
title: '通知已开启',
|
|
body: '您将收到运动提醒和重要通知',
|
|
sound: true,
|
|
priority: 'normal',
|
|
});
|
|
} else {
|
|
Alert.alert('权限被拒绝', '请在系统设置中开启通知权限');
|
|
}
|
|
} catch (error) {
|
|
Alert.alert('错误', '请求通知权限失败');
|
|
}
|
|
} else {
|
|
setNotificationEnabled(false);
|
|
Alert.alert('通知已关闭', '您将不会收到推送通知');
|
|
}
|
|
};
|
|
|
|
// 用户信息头部
|
|
const UserHeader = () => (
|
|
<View style={styles.sectionContainer}>
|
|
<Text style={styles.sectionTitle}>个人信息</Text>
|
|
<View style={styles.cardContainer}>
|
|
<View style={styles.userInfoContainer}>
|
|
<View style={styles.avatarContainer}>
|
|
<Image
|
|
source={{ uri: userProfile.avatar || DEFAULT_AVATAR_URL }}
|
|
style={styles.avatar}
|
|
/>
|
|
</View>
|
|
<View style={styles.userDetails}>
|
|
<Text style={styles.userName}>{displayName}</Text>
|
|
</View>
|
|
<TouchableOpacity style={styles.editButton} onPress={() => pushIfAuthedElseLogin('/profile/edit')}>
|
|
<Text style={styles.editButtonText}>编辑</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
// 数据统计部分
|
|
const StatsSection = () => (
|
|
<View style={styles.sectionContainer}>
|
|
<Text style={styles.sectionTitle}>身体数据</Text>
|
|
<View style={styles.cardContainer}>
|
|
<View style={styles.statsContainer}>
|
|
<View style={styles.statItem}>
|
|
<Text style={styles.statValue}>{formatHeight()}</Text>
|
|
<Text style={styles.statLabel}>身高</Text>
|
|
</View>
|
|
<View style={styles.statItem}>
|
|
<Text style={styles.statValue}>{formatWeight()}</Text>
|
|
<Text style={styles.statLabel}>体重</Text>
|
|
</View>
|
|
<View style={styles.statItem}>
|
|
<Text style={styles.statValue}>{formatAge()}</Text>
|
|
<Text style={styles.statLabel}>年龄</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
// 菜单项组件
|
|
const MenuSection = ({ title, items }: { title: string; items: any[] }) => (
|
|
<View style={styles.sectionContainer}>
|
|
<Text style={styles.sectionTitle}>{title}</Text>
|
|
<View style={styles.cardContainer}>
|
|
{items.map((item, index) => (
|
|
<TouchableOpacity
|
|
key={index}
|
|
style={[styles.menuItem, index === items.length - 1 && { borderBottomWidth: 0 }]}
|
|
onPress={item.type === 'switch' ? undefined : item.onPress}
|
|
disabled={item.type === 'switch'}
|
|
>
|
|
<View style={styles.menuItemLeft}>
|
|
<View style={[
|
|
styles.iconContainer,
|
|
{ backgroundColor: item.isDanger ? 'rgba(255,68,68,0.1)' : 'rgba(147, 112, 219, 0.1)' }
|
|
]}>
|
|
<Ionicons
|
|
name={item.icon}
|
|
size={20}
|
|
color={item.isDanger ? '#FF4444' : '#9370DB'}
|
|
/>
|
|
</View>
|
|
<Text style={styles.menuItemText}>{item.title}</Text>
|
|
</View>
|
|
{item.type === 'switch' ? (
|
|
<Switch
|
|
value={item.switchValue || false}
|
|
onValueChange={item.onSwitchChange || (() => {})}
|
|
trackColor={{ false: '#E5E5E5', true: '#9370DB' }}
|
|
thumbColor="#FFFFFF"
|
|
style={styles.switch}
|
|
/>
|
|
) : (
|
|
<Ionicons name="chevron-forward" size={20} color="#CCCCCC" />
|
|
)}
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
// 菜单项配置
|
|
const menuSections = [
|
|
{
|
|
title: '账户',
|
|
items: [
|
|
{
|
|
icon: 'flag-outline' as const,
|
|
title: '目标管理',
|
|
onPress: () => pushIfAuthedElseLogin('/profile/goals'),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: '通知',
|
|
items: [
|
|
{
|
|
icon: 'notifications-outline' as const,
|
|
title: '消息推送',
|
|
type: 'switch' as const,
|
|
switchValue: notificationEnabled,
|
|
onSwitchChange: handleNotificationToggle,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: '其他',
|
|
items: [
|
|
{
|
|
icon: 'shield-checkmark-outline' as const,
|
|
title: '隐私政策',
|
|
onPress: () => Linking.openURL(PRIVACY_POLICY_URL),
|
|
},
|
|
{
|
|
icon: 'document-text-outline' as const,
|
|
title: '用户协议',
|
|
onPress: () => Linking.openURL(USER_AGREEMENT_URL),
|
|
},
|
|
],
|
|
},
|
|
// 只有登录用户才显示账号与安全菜单
|
|
...(isLoggedIn ? [{
|
|
title: '账号与安全',
|
|
items: [
|
|
{
|
|
icon: 'log-out-outline' as const,
|
|
title: '退出登录',
|
|
onPress: confirmLogout,
|
|
isDanger: false,
|
|
},
|
|
{
|
|
icon: 'trash-outline' as const,
|
|
title: '注销帐号',
|
|
onPress: confirmDeleteAccount,
|
|
isDanger: true,
|
|
},
|
|
],
|
|
}] : []),
|
|
];
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<StatusBar barStyle={'dark-content'} backgroundColor="transparent" translucent />
|
|
<SafeAreaView style={styles.safeArea}>
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={{ paddingBottom: bottomPadding }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<UserHeader />
|
|
<StatsSection />
|
|
<ActivityHeatMap />
|
|
{menuSections.map((section, index) => (
|
|
<MenuSection key={index} title={section.title} items={section.items} />
|
|
))}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#FAFAFA',
|
|
},
|
|
safeArea: {
|
|
flex: 1,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
paddingHorizontal: 16,
|
|
paddingTop: 16,
|
|
},
|
|
// 部分容器
|
|
sectionContainer: {
|
|
marginBottom: 20,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
color: '#2C3E50',
|
|
marginBottom: 10,
|
|
paddingHorizontal: 4,
|
|
},
|
|
// 卡片容器
|
|
cardContainer: {
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 12,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
overflow: 'hidden',
|
|
},
|
|
// 用户信息区域
|
|
userInfoContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
},
|
|
avatarContainer: {
|
|
marginRight: 12,
|
|
},
|
|
avatar: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
borderWidth: 2,
|
|
borderColor: '#9370DB',
|
|
},
|
|
userDetails: {
|
|
flex: 1,
|
|
},
|
|
userName: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
color: '#2C3E50',
|
|
marginBottom: 4,
|
|
},
|
|
userRole: {
|
|
fontSize: 14,
|
|
color: '#9370DB',
|
|
fontWeight: '500',
|
|
},
|
|
editButton: {
|
|
backgroundColor: '#9370DB',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
borderRadius: 16,
|
|
},
|
|
editButtonText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
// 数据统计
|
|
statsContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
padding: 16,
|
|
},
|
|
statItem: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
statValue: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
color: '#9370DB',
|
|
marginBottom: 4,
|
|
},
|
|
statLabel: {
|
|
fontSize: 12,
|
|
color: '#6C757D',
|
|
fontWeight: '500',
|
|
},
|
|
// 菜单项
|
|
menuItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 14,
|
|
paddingHorizontal: 16,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#F1F3F4',
|
|
},
|
|
menuItemLeft: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
iconContainer: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 6,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 12,
|
|
},
|
|
menuItemText: {
|
|
fontSize: 15,
|
|
color: '#2C3E50',
|
|
fontWeight: '500',
|
|
},
|
|
switch: {
|
|
transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
|
|
},
|
|
});
|