feat: 集成推送通知功能及相关组件
- 在项目中引入expo-notifications库，支持本地推送通知功能 - 实现通知权限管理，用户可选择开启或关闭通知 - 新增通知发送、定时通知和重复通知功能 - 更新个人页面，集成通知开关和权限请求逻辑 - 编写推送通知功能实现文档，详细描述功能和使用方法 - 优化心情日历页面，确保数据实时刷新
This commit is contained in:
302
components/NotificationTest.tsx
Normal file
302
components/NotificationTest.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
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,
|
||||
} = 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('错误', '获取已安排通知失败');
|
||||
}
|
||||
};
|
||||
|
||||
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.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',
|
||||
},
|
||||
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,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user