使用react-native-calendar-events无法将事件保存到Google日历

我基于react-native-calendar-events包编写了React Native代码，可创建并获取日历事件，日志能正常显示事件数据，但物理设备的Google日历中看不到该事件。已在AndroidManifest.xml中添加读写日历权限。

代码实现 #

import React, {useEffect, useState} from 'react';
import {
  View,
  StyleSheet,
  TextInput,
  Button,
  Platform,
} from 'react-native';
import RNCalendarEvents from 'react-native-calendar-events';

const SaveEventInfo = () => {
  const [eventTitle, setEventTitle] = useState('Hello world');
  const [eventLocation, setEventLocation] = useState('Global');
  const [eventId, setEventId] = useState('');
  const [calendars, setCalendars] = useState([]);
  const [pickedCal, setPickedCal] = useState(null);

  useEffect(() => {
    async function loadCalendars() {
      try {
        const perms = await RNCalendarEvents.requestPermissions();
        if (perms === 'authorized') {
          const allCalendars = await RNCalendarEvents.findCalendars();
          
          // Check for primary calendar
          const primaryCal = allCalendars.find(
            cal => cal.isPrimary && cal.allowsModifications,
          );
    
          console.log('All Calendars:', allCalendars);
          console.log('Primary Calendar:', primaryCal); 
          
          setCalendars(allCalendars);
          setPickedCal(primaryCal);
          console.log('Selected Calendar:', primaryCal); 
        } else {
          console.log('Calendar permission denied.');
        }
      } catch (error) {
        console.log('Error while fetching calendars:', error);
      }
    }

    if (Platform.OS === 'android') {
      loadCalendars();
    }
  }, []);

  const createEvent = async () => {
    try {
      const startDate = new Date(); 
      const endDate = new Date(startDate.getTime() + 60 * 60 * 1000); // 1 hour later
      
      const savedEventId = await RNCalendarEvents.saveEvent(eventTitle, {
        calendarId: Platform.OS === 'android' ? pickedCal?.id : undefined,
        startDate: startDate.toISOString(),
        endDate: endDate.toISOString(),
        location: eventLocation,
      });
  
      setEventId(savedEventId);
      alert('Event saved successfully.');
    } catch (error) {
      console.log('Error while saving event:', error);
    }
  };

  const fetchEvent = async () => {
    try {
      const eventData = await RNCalendarEvents.findEventById(eventId);
      console.log('Event Data:', eventData);
    } catch (error) {
      console.log('Error while fetching event:', error);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.textInput}
        placeholder="Enter Event Title"
        value={eventTitle}
        onChangeText={setEventTitle}
      />
      <TextInput
        style={styles.textInput}
        placeholder="Enter Event Location"
        value={eventLocation}
        onChangeText={setEventLocation}
        multiline={true}
        numberOfLines={2}
      />
      <Button title="Save Event" onPress={createEvent} />
      <Button title="Fetch Event" onPress={fetchEvent} />
    </View>
  );
};

export default SaveEventInfo;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 8,
  },
});

已添加的权限（AndroidManifest.xml） #

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

请问缺失了什么配置？如何让事件成功保存到Google日历？

• 确认选中的日历为Google账户日历
  代码中优先选择的主日历可能是设备本地日历而非Google日历。Google日历的accountType字段为com.google，修改日历筛选逻辑：

  const googleCal = allCalendars.find(
    cal => cal.accountType === 'com.google' && cal.allowsModifications
  );
  setPickedCal(googleCal || primaryCal);
  

  打印allCalendars可查看所有日历的accountName（对应Google邮箱）、title等信息，验证选中的是否为目标日历。

• 检查权限状态
  确保requestPermissions()返回authorized。若权限被拒绝，需引导用户前往系统设置开启日历权限。

• 等待Google日历同步
  新创建的事件需要同步到云端，可能存在延迟。可手动打开Google日历APP下拉刷新，或等待几分钟后再查看，同时确保设备网络正常。

• 验证事件时间范围
  当前代码创建的是即时1小时事件，可能被Google日历的视图过滤。尝试创建未来几小时的事件，或切换到“日”视图查看。

• 更新依赖版本
  旧版本react-native-calendar-events可能存在Android兼容性问题，执行命令更新到最新版：

  npm install react-native-calendar-events@latest
  

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