React Native应用实现日历提醒自动创建功能的技术问询

推荐使用依赖库：react-native-calendar-events #

这个库能直接与系统日历交互，支持创建事件、权限申请等核心功能，无需自行编写原生桥接代码，是社区目前稳定性较高的选择。

1. 安装依赖 #

npm install react-native-calendar-events --save
# 或使用 yarn
yarn add react-native-calendar-events

iOS项目需额外执行 cd ios && pod install 完成依赖集成。

2. 权限配置 #

• iOS：在项目根目录的Info.plist中添加权限描述

  <key>NSCalendarsUsageDescription</key>
  <string>需要访问日历以创建活动提醒</string>
  <key>NSRemindersUsageDescription</key>
  <string>需要访问提醒事项以创建活动提醒</string>
  

• Android：在android/app/src/main/AndroidManifest.xml中添加权限声明

  <uses-permission android:name="android.permission.READ_CALENDAR" />
  <uses-permission android:name="android.permission.WRITE_CALENDAR" />
  

3. 核心实现代码 #

封装创建日历事件并跳转至系统日历的函数，结合按钮点击事件触发：

import RNCalendarEvents from 'react-native-calendar-events';
import { Button, Alert, Platform, Linking } from 'react-native';

// 创建日历事件并跳转至系统日历
const createCalendarEventAndOpen = async (eventData) => {
  try {
    // 申请日历权限
    const authStatus = await RNCalendarEvents.requestPermissions();
    if (authStatus !== 'authorized') {
      Alert.alert('提示', '请授予日历访问权限以创建提醒');
      return;
    }

    // 创建日历事件
    const eventId = await RNCalendarEvents.saveEvent(eventData.title, {
      startDate: eventData.startDate.toISOString(), // 必须为ISO格式字符串
      endDate: eventData.endDate.toISOString(),
      location: eventData.location,
      notes: eventData.description,
      alarms: [{ date: -10 }] // 提前10分钟触发提醒，支持设置多个提醒
    });

    // 跳转至系统日历（分平台处理）
    if (Platform.OS === 'ios') {
      Linking.openURL(`calshow:${eventId}`); // iOS直接定位到创建的事件
    } else {
      // Android 部分ROM可能URI兼容问题，优先尝试定位事件，失败则打开日历应用
      const canOpen = await Linking.canOpenURL(`content://com.android.calendar/events/${eventId}`);
      if (canOpen) {
        Linking.openURL(`content://com.android.calendar/events/${eventId}`);
      } else {
        Linking.openURL('calendar://');
      }
    }
  } catch (error) {
    console.error('创建日历事件失败:', error);
    Alert.alert('提示', '创建提醒失败，请重试');
  }
};

// 使用示例：传入活动数据
const demoEvent = {
  title: '前端技术沙龙',
  startDate: new Date('2024-06-20T19:00:00'),
  endDate: new Date('2024-06-20T21:00:00'),
  location: '线上会议室',
  description: 'React Native性能优化实战分享'
};

// 按钮组件
<Button title="获取该活动提醒" onPress={() => createCalendarEventAndOpen(demoEvent)} />

4. 关键注意事项 #

• 日期格式：必须传递ISO标准格式的字符串，直接调用new Date().toISOString()即可，避免手动拼接导致的格式错误。
• Android兼容性：部分国产ROM对日历URI的支持存在差异，如果无法直接定位到事件，退而求其次打开日历应用引导用户查看。
• 提醒配置：alarms字段支持设置多个提醒，例如[{date: -30}, {date: -10}]表示提前30分钟和10分钟各触发一次提醒。
• 权限处理：必须先申请权限，无权限状态下无法创建事件，需通过弹窗明确引导用户开启权限。

内容的提问来源于stack exchange，提问作者KingMaker