Files
digital-pilates/components/NotificationTest.tsx
richarjiang 7f2afdf671 feat: 增强通知功能及用户体验
- 在 Bootstrapper 组件中新增通知服务初始化逻辑,注册每日午餐提醒
- 在 CoachScreen 中优化欢迎消息生成逻辑,整合用户配置文件数据
- 更新 GoalsScreen 组件,优化目标创建时的通知设置逻辑
- 在 NotificationTest 组件中添加调试通知状态功能,提升开发便利性
- 新增 NutritionNotificationHelpers 中的午餐提醒功能,支持每日提醒设置
- 更新相关文档,详细描述新功能和使用方法
2025-08-26 09:56:23 +08:00

323 lines
9.0 KiB
TypeScript

import React, { useState } from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Alert,
ScrollView,
} from 'react-native';
import { useNotifications } from '../hooks/useNotifications';
import { ThemedText } from './ThemedText';
import { ThemedView } from './ThemedView';
export const NotificationTest: React.FC = () => {
const {
isInitialized,
permissionStatus,
requestPermission,
sendNotification,
scheduleNotification,
scheduleRepeatingNotification,
cancelAllNotifications,
getAllScheduledNotifications,
sendWorkoutReminder,
sendGoalAchievement,
sendMoodCheckinReminder,
debugNotificationStatus,
} = useNotifications();
const [scheduledNotifications, setScheduledNotifications] = useState<any[]>([]);
const handleRequestPermission = async () => {
try {
const status = await requestPermission();
Alert.alert('权限状态', `通知权限: ${status}`);
} catch (error) {
Alert.alert('错误', '请求权限失败');
}
};
const handleSendImmediateNotification = async () => {
try {
await sendNotification({
title: '测试通知',
body: '这是一个立即发送的测试通知',
sound: true,
priority: 'high',
});
Alert.alert('成功', '通知已发送');
} catch (error) {
Alert.alert('错误', '发送通知失败');
}
};
const handleScheduleNotification = async () => {
try {
const futureDate = new Date(Date.now() + 5000); // 5秒后
await scheduleNotification(
{
title: '定时通知',
body: '这是一个5秒后发送的定时通知',
sound: true,
priority: 'normal',
},
futureDate
);
Alert.alert('成功', '定时通知已安排');
} catch (error) {
Alert.alert('错误', '安排定时通知失败');
}
};
const handleScheduleRepeatingNotification = async () => {
try {
await scheduleRepeatingNotification(
{
title: '重复通知',
body: '这是一个每分钟重复的通知',
sound: true,
priority: 'normal',
},
{ minutes: 1 }
);
Alert.alert('成功', '重复通知已安排');
} catch (error) {
Alert.alert('错误', '安排重复通知失败');
}
};
const handleSendWorkoutReminder = async () => {
try {
await sendWorkoutReminder('运动提醒', '该开始今天的普拉提训练了!');
Alert.alert('成功', '运动提醒已发送');
} catch (error) {
Alert.alert('错误', '发送运动提醒失败');
}
};
const handleSendGoalAchievement = async () => {
try {
await sendGoalAchievement('目标达成', '恭喜您完成了本周的运动目标!');
Alert.alert('成功', '目标达成通知已发送');
} catch (error) {
Alert.alert('错误', '发送目标达成通知失败');
}
};
const handleSendMoodCheckinReminder = async () => {
try {
await sendMoodCheckinReminder('心情打卡', '记得记录今天的心情状态哦');
Alert.alert('成功', '心情打卡提醒已发送');
} catch (error) {
Alert.alert('错误', '发送心情打卡提醒失败');
}
};
const handleCancelAllNotifications = async () => {
try {
await cancelAllNotifications();
Alert.alert('成功', '所有通知已取消');
} catch (error) {
Alert.alert('错误', '取消通知失败');
}
};
const handleGetScheduledNotifications = async () => {
try {
const notifications = await getAllScheduledNotifications();
setScheduledNotifications(notifications);
Alert.alert('成功', `找到 ${notifications.length} 个已安排的通知`);
} catch (error) {
Alert.alert('错误', '获取已安排通知失败');
}
};
const handleDebugNotificationStatus = async () => {
try {
await debugNotificationStatus();
Alert.alert('调试完成', '请查看控制台输出');
} catch (error) {
Alert.alert('错误', '调试失败');
}
};
return (
<ThemedView style={styles.container}>
<ScrollView showsVerticalScrollIndicator={false}>
<ThemedText style={styles.title}></ThemedText>
<View style={styles.statusContainer}>
<ThemedText style={styles.statusText}>
: {isInitialized ? '已初始化' : '未初始化'}
</ThemedText>
<ThemedText style={styles.statusText}>
: {permissionStatus || '未知'}
</ThemedText>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={handleRequestPermission}
>
<ThemedText style={styles.buttonText}></ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={handleSendImmediateNotification}
>
<ThemedText style={styles.buttonText}></ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={handleScheduleNotification}
>
<ThemedText style={styles.buttonText}>(5)</ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={handleScheduleRepeatingNotification}
>
<ThemedText style={styles.buttonText}>()</ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={handleSendWorkoutReminder}
>
<ThemedText style={styles.buttonText}></ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={handleSendGoalAchievement}
>
<ThemedText style={styles.buttonText}></ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={handleSendMoodCheckinReminder}
>
<ThemedText style={styles.buttonText}></ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={handleGetScheduledNotifications}
>
<ThemedText style={styles.buttonText}></ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.debugButton]}
onPress={handleDebugNotificationStatus}
>
<ThemedText style={styles.buttonText}></ThemedText>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.dangerButton]}
onPress={handleCancelAllNotifications}
>
<ThemedText style={styles.buttonText}></ThemedText>
</TouchableOpacity>
</View>
{scheduledNotifications.length > 0 && (
<View style={styles.notificationsContainer}>
<ThemedText style={styles.sectionTitle}>:</ThemedText>
{scheduledNotifications.map((notification, index) => (
<View key={index} style={styles.notificationItem}>
<ThemedText style={styles.notificationTitle}>
{notification.content.title}
</ThemedText>
<ThemedText style={styles.notificationBody}>
{notification.content.body}
</ThemedText>
<ThemedText style={styles.notificationId}>
ID: {notification.identifier}
</ThemedText>
</View>
))}
</View>
)}
</ScrollView>
</ThemedView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center',
},
statusContainer: {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
padding: 15,
borderRadius: 10,
marginBottom: 20,
},
statusText: {
fontSize: 14,
marginBottom: 5,
},
buttonContainer: {
gap: 10,
},
button: {
backgroundColor: '#007AFF',
padding: 15,
borderRadius: 10,
alignItems: 'center',
},
dangerButton: {
backgroundColor: '#FF3B30',
},
debugButton: {
backgroundColor: '#FF9500',
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
notificationsContainer: {
marginTop: 20,
},
sectionTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
},
notificationItem: {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
padding: 15,
borderRadius: 10,
marginBottom: 10,
},
notificationTitle: {
fontSize: 16,
fontWeight: '600',
marginBottom: 5,
},
notificationBody: {
fontSize: 14,
marginBottom: 5,
},
notificationId: {
fontSize: 12,
opacity: 0.7,
},
});