feat: 添加用户推送通知偏好设置功能，支持开启/关闭推送通知

2025-09-03 10:58:45 +08:00
parent e33a690a36
commit 8b6ef378d0
6 changed files with 265 additions and 26 deletions
--- a/app/(tabs)/personal.tsx
+++ b/app/(tabs)/personal.tsx
@@ -5,6 +5,7 @@ import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useNotifications } from '@/hooks/useNotifications';
 import { DEFAULT_MEMBER_NAME, fetchActivityHistory, fetchMyProfile } from '@/store/userSlice';
+import { getNotificationEnabled, setNotificationEnabled as saveNotificationEnabled } from '@/utils/userPreferences';
 import { Ionicons } from '@expo/vector-icons';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { useFocusEffect } from '@react-navigation/native';
@@ -42,10 +43,22 @@ export default function PersonalScreen() {
  useFocusEffect(
    React.useCallback(() => {
      dispatch(fetchMyProfile());
-      dispatch(fetchActivityHistory())
+      dispatch(fetchActivityHistory());
+      // 加载用户推送偏好设置
+      loadNotificationPreference();
    }, [dispatch])
  );

+  // 加载用户推送偏好设置
+  const loadNotificationPreference = async () => {
+    try {
+      const enabled = await getNotificationEnabled();
+      setNotificationEnabled(enabled);
+    } catch (error) {
+      console.error('加载推送偏好设置失败:', error);
+    }
+  };
+
  // 数据格式化函数
  const formatHeight = () => {
    if (userProfile.height == null) return '--';
@@ -68,22 +81,22 @@ export default function PersonalScreen() {
  // 显示名称
  const displayName = (userProfile.name?.trim()) ? userProfile.name : DEFAULT_MEMBER_NAME;

-  // 监听通知权限状态变化
+  // 初始化时加载推送偏好设置
  useEffect(() => {
-    if (permissionStatus === 'granted') {
-      setNotificationEnabled(true);
-    } else {
-      setNotificationEnabled(false);
-    }
-  }, [permissionStatus]);
+    loadNotificationPreference();
+  }, []);

  // 处理通知开关变化
  const handleNotificationToggle = async (value: boolean) => {
    if (value) {
      try {
+        // 先检查系统权限
        const status = await requestPermission();
        if (status === 'granted') {
+          // 系统权限获取成功，保存用户偏好设置
+          await saveNotificationEnabled(true);
          setNotificationEnabled(true);
+
          // 发送测试通知
          await sendNotification({
            title: '通知已开启',
@@ -92,14 +105,29 @@ export default function PersonalScreen() {
            priority: 'normal',
          });
        } else {
-          Alert.alert('权限被拒绝', '请在系统设置中开启通知权限');
+          // 系统权限被拒绝，不更新用户偏好设置
+          Alert.alert(
+            '权限被拒绝',
+            '请在系统设置中开启通知权限，然后再尝试开启推送功能',
+            [
+              { text: '取消', style: 'cancel' },
+              { text: '去设置', onPress: () => Linking.openSettings() }
+            ]
+          );
        }
      } catch (error) {
+        console.error('开启推送通知失败:', error);
        Alert.alert('错误', '请求通知权限失败');
      }
    } else {
-      setNotificationEnabled(false);
-      Alert.alert('通知已关闭', '您将不会收到推送通知');
+      try {
+        // 关闭推送，保存用户偏好设置
+        await saveNotificationEnabled(false);
+        setNotificationEnabled(false);
+      } catch (error) {
+        console.error('关闭推送通知失败:', error);
+        Alert.alert('错误', '保存设置失败');
+      }
    }
  };

--- a/components/StepsCard.tsx
+++ b/components/StepsCard.tsx
@@ -54,21 +54,29 @@ const StepsCard: React.FC<StepsCardProps> = ({

  // 触发柱体动画
  useEffect(() => {
-    if (chartData && chartData.length > 0) {
+    // 检查是否有实际数据（不只是空数组）
+    const hasData = chartData && chartData.length > 0 && chartData.some(data => data.steps > 0);
+    
+    if (hasData) {
      // 重置所有动画值
      animatedValues.forEach(animValue => animValue.setValue(0));

-      // 同时启动所有柱体的弹性动画，有步数的柱体才执行动画
-      chartData.forEach((data, index) => {
-        if (data.steps > 0) {
-          Animated.spring(animatedValues[index], {
-            toValue: 1,
-            tension: 150,
-            friction: 8,
-            useNativeDriver: false,
-          }).start();
-        }
-      });
+      // 使用 setTimeout 确保在下一个事件循环中执行动画，保证组件已完全渲染
+      const timeoutId = setTimeout(() => {
+        // 同时启动所有柱体的弹性动画，有步数的柱体才执行动画
+        chartData.forEach((data, index) => {
+          if (data.steps > 0) {
+            Animated.spring(animatedValues[index], {
+              toValue: 1,
+              tension: 150,
+              friction: 8,
+              useNativeDriver: false,
+            }).start();
+          }
+        });
+      }, 50); // 添加小延迟确保渲染完成
+
+      return () => clearTimeout(timeoutId);
    }
  }, [chartData, animatedValues]);

--- a/docs/notification-user-preference-implementation.md
+++ b/docs/notification-user-preference-implementation.md
@@ -0,0 +1,137 @@
+# 推送通知用户偏好设置控制实现文档
+
+## 概述
+
+本次实现为项目的推送通知系统添加了用户偏好设置控制功能。用户现在可以通过个人页面的开关来控制是否接收推送通知，该设置会在底层推送服务中生效。
+
+## 实现内容
+
+### 1. 用户偏好设置扩展 (`utils/userPreferences.ts`)
+
+新增了以下功能：
+
+- **接口扩展**：在 `UserPreferences` 接口中添加了 `notificationEnabled: boolean` 字段
+- **存储键**：添加了 `NOTIFICATION_ENABLED` 存储键
+- **默认值**：推送通知默认开启 (`true`)
+- **新增方法**：
+  - `setNotificationEnabled(enabled: boolean)`: 设置推送开关状态
+  - `getNotificationEnabled()`: 获取推送开关状态
+  - 更新了 `resetUserPreferences()` 以包含推送设置
+
+### 2. 推送服务核心控制 (`services/notifications.ts`)
+
+在 `NotificationService` 类中添加了用户偏好检查机制：
+
+- **新增方法**：`isNotificationAllowed()` - 检查用户是否允许推送通知
+- **双重检查**：
+  1. 检查用户偏好设置中的推送开关
+  2. 检查系统推送权限状态
+- **统一拦截**：在 `scheduleLocalNotification()` 方法中统一检查，确保所有推送都受控制
+
+### 3. 个人页面开关同步 (`app/(tabs)/personal.tsx`)
+
+更新了个人页面的推送开关逻辑：
+
+- **状态同步**：开关状态与用户偏好设置保持同步
+- **页面加载**：页面聚焦时自动加载用户推送偏好设置
+- **开关处理**：
+  - 开启时：先检查系统权限，成功后保存用户偏好
+  - 关闭时：直接保存用户偏好设置
+- **错误处理**：提供友好的错误提示和引导
+
+## 工作流程
+
+```
+用户操作推送开关
+       ↓
+检查系统推送权限 (仅开启时)
+       ↓
+保存用户偏好设置
+       ↓
+底层推送服务检查
+       ↓
+发送/阻止推送通知
+```
+
+## 使用方式
+
+### 1. 用户操作
+
+用户可以在个人页面的"通知"部分找到"消息推送"开关：
+- 开启：需要系统权限，成功后会发送测试通知
+- 关闭：立即生效，不会收到任何推送通知
+
+### 2. 开发者使用
+
+所有现有的推送通知方法都会自动受到用户偏好设置控制：
+
+```typescript
+// 这些方法都会自动检查用户偏好设置
+await notificationService.sendImmediateNotification(notification);
+await WorkoutNotificationHelpers.sendWorkoutStartReminder(userName);
+await GoalNotificationHelpers.sendGoalAchievementNotification(userName, goalName);
+```
+
+### 3. 测试功能
+
+提供了完整的测试工具 (`utils/notificationTest.ts`)：
+
+```typescript
+import { NotificationTestHelpers } from '@/utils/notificationTest';
+
+// 测试用户偏好设置控制
+await NotificationTestHelpers.testUserPreferenceControl();
+
+// 测试权限状态
+await NotificationTestHelpers.testPermissionStatus();
+
+// 测试不同类型的通知
+await NotificationTestHelpers.testDifferentNotificationTypes();
+```
+
+## 技术特点
+
+### 1. 双重保护机制
+- **用户偏好层**：用户主动控制是否接收推送
+- **系统权限层**：系统级别的推送权限控制
+
+### 2. 统一拦截点
+- 所有推送通知都通过 `NotificationService.scheduleLocalNotification()` 方法
+- 在此方法中统一检查用户偏好和系统权限
+- 确保没有推送能绕过用户设置
+
+### 3. 状态同步
+- 个人页面开关与用户偏好设置实时同步
+- 页面聚焦时自动刷新状态
+- 避免状态不一致问题
+
+### 4. 向后兼容
+- 不影响现有推送通知代码
+- 所有现有方法自动获得用户偏好控制功能
+- 默认开启推送，保持原有用户体验
+
+## 日志和调试
+
+系统会在控制台输出相关日志：
+
+```
+用户已在偏好设置中关闭推送通知
+推送通知被用户偏好设置或系统权限阻止，跳过发送
+本地通知已安排，ID: notification-id-123
+```
+
+## 注意事项
+
+1. **权限优先级**：即使用户开启了偏好设置，如果系统权限被拒绝，推送仍然无法发送
+2. **测试通知**：用户开启推送时会发送一条测试通知，确认功能正常
+3. **错误处理**：所有操作都有完善的错误处理和用户提示
+4. **性能影响**：每次发送推送前会进行异步检查，但影响微乎其微
+
+## 未来扩展
+
+可以考虑添加更细粒度的推送控制：
+- 按通知类型分别控制（运动提醒、目标通知等）
+- 时间段控制（勿扰时间）
+- 频率控制（每日最大推送数量）
+
+这些功能可以基于当前的架构轻松扩展。
--- a/services/notifications.ts
+++ b/services/notifications.ts
@@ -1,3 +1,4 @@
+import { getNotificationEnabled } from '@/utils/userPreferences';
 import * as Notifications from 'expo-notifications';
 import { router } from 'expo-router';

@@ -180,6 +181,32 @@ export class NotificationService {
    }
  }

+  /**
+   * 检查用户是否允许推送通知
+   */
+  private async isNotificationAllowed(): Promise<boolean> {
+    try {
+      // 检查用户偏好设置中的推送开关
+      const userPreferenceEnabled = await getNotificationEnabled();
+      if (!userPreferenceEnabled) {
+        console.log('用户已在偏好设置中关闭推送通知');
+        return false;
+      }
+
+      // 检查系统权限
+      const permissionStatus = await this.getPermissionStatus();
+      if (permissionStatus !== 'granted') {
+        console.log('系统推送权限未授予');
+        return false;
+      }
+
+      return true;
+    } catch (error) {
+      console.error('检查推送权限失败:', error);
+      return false;
+    }
+  }
+
  /**
   * 发送本地推送通知
   */
@@ -188,6 +215,13 @@ export class NotificationService {
    trigger?: Notifications.NotificationTriggerInput
  ): Promise<string> {
    try {
+      // 检查用户是否允许推送通知
+      const isAllowed = await this.isNotificationAllowed();
+      if (!isAllowed) {
+        console.log('推送通知被用户偏好设置或系统权限阻止，跳过发送');
+        return 'blocked_by_user_preference';
+      }
+
      const notificationId = await Notifications.scheduleNotificationAsync({
        content: {
          title: notification.title,
--- a/utils/userPreferences.ts
+++ b/utils/userPreferences.ts
@@ -3,16 +3,19 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 // 用户偏好设置的存储键
 const PREFERENCES_KEYS = {
  QUICK_WATER_AMOUNT: 'user_preference_quick_water_amount',
+  NOTIFICATION_ENABLED: 'user_preference_notification_enabled',
 } as const;

 // 用户偏好设置接口
 export interface UserPreferences {
  quickWaterAmount: number;
+  notificationEnabled: boolean;
 }

 // 默认的用户偏好设置
 const DEFAULT_PREFERENCES: UserPreferences = {
-  quickWaterAmount: 150, // 默认快速添加饮水量为 250ml
+  quickWaterAmount: 150, // 默认快速添加饮水量为 150ml
+  notificationEnabled: true, // 默认开启消息推送
 };

 /**
@@ -21,9 +24,11 @@ const DEFAULT_PREFERENCES: UserPreferences = {
 export const getUserPreferences = async (): Promise<UserPreferences> => {
  try {
    const quickWaterAmount = await AsyncStorage.getItem(PREFERENCES_KEYS.QUICK_WATER_AMOUNT);
+    const notificationEnabled = await AsyncStorage.getItem(PREFERENCES_KEYS.NOTIFICATION_ENABLED);

    return {
      quickWaterAmount: quickWaterAmount ? parseInt(quickWaterAmount, 10) : DEFAULT_PREFERENCES.quickWaterAmount,
+      notificationEnabled: notificationEnabled !== null ? notificationEnabled === 'true' : DEFAULT_PREFERENCES.notificationEnabled,
    };
  } catch (error) {
    console.error('获取用户偏好设置失败:', error);
@@ -59,12 +64,39 @@ export const getQuickWaterAmount = async (): Promise<number> => {
  }
 };

+/**
+ * 设置消息推送开关
+ * @param enabled 是否开启消息推送
+ */
+export const setNotificationEnabled = async (enabled: boolean): Promise<void> => {
+  try {
+    await AsyncStorage.setItem(PREFERENCES_KEYS.NOTIFICATION_ENABLED, enabled.toString());
+  } catch (error) {
+    console.error('设置消息推送开关失败:', error);
+    throw error;
+  }
+};
+
+/**
+ * 获取消息推送开关状态
+ */
+export const getNotificationEnabled = async (): Promise<boolean> => {
+  try {
+    const enabled = await AsyncStorage.getItem(PREFERENCES_KEYS.NOTIFICATION_ENABLED);
+    return enabled !== null ? enabled === 'true' : DEFAULT_PREFERENCES.notificationEnabled;
+  } catch (error) {
+    console.error('获取消息推送开关状态失败:', error);
+    return DEFAULT_PREFERENCES.notificationEnabled;
+  }
+};
+
 /**
 * 重置所有用户偏好设置为默认值
 */
 export const resetUserPreferences = async (): Promise<void> => {
  try {
    await AsyncStorage.removeItem(PREFERENCES_KEYS.QUICK_WATER_AMOUNT);
+    await AsyncStorage.removeItem(PREFERENCES_KEYS.NOTIFICATION_ENABLED);
  } catch (error) {
    console.error('重置用户偏好设置失败:', error);
    throw error;