跳过主要内容
返回插件
@capgo/capacitor-live-activities
教程
由 github.com/Cap-go

Live Activities

使用 Capacitor 的 JSON 模板管理 iOS Live Activities 和动态岛布局

指南

关于实时活动的教程

使用 @capgo/capacitor-live-activities

Capacitor 实时活动插件,用于管理 iOS 实时活动。

安装

bun add @capgo/capacitor-live-activities
bunx cap sync

此插件暴露的内容

  • areActivitiesSupported - 检查该设备是否支持实时活动。需要 iOS 16.1+ 和设备支持。
  • startActivity - 使用指定的布局和数据启动一个新的实时活动。
  • updateActivity - 使用新数据更新一个现有的实时活动。
  • endActivity - 结束一个实时活动。

示例用法

areActivitiesSupported

检查该设备是否支持实时活动。需要 iOS 16.1+ 和设备支持。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

const { supported, reason } = await CapgoLiveActivities.areActivitiesSupported();
if (supported) {
  console.log('Live Activities are supported!');
} else {
  console.log('Not supported:', reason);
}

startActivity

使用指定的布局和数据启动一个新的实时活动。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

const { activityId } = await CapgoLiveActivities.startActivity({
  layout: {
    type: 'container',
    direction: 'horizontal',
    children: [
      { type: 'text', content: 'Order #{{orderNumber}}', fontSize: 16, fontWeight: 'bold' },
      { type: 'text', content: '{{status}}', fontSize: 14, color: '#666666' }
    ]
  },
  dynamicIslandLayout: {
    expanded: {
      leading: { type: 'image', source: 'sfSymbol', value: 'box.truck' },
      trailing: { type: 'text', content: '{{eta}}' },
      center: { type: 'text', content: '{{status}}' },
      bottom: { type: 'progress', value: 'progress' }
    },
    compactLeading: { type: 'image', source: 'sfSymbol', value: 'box.truck' },
    compactTrailing: { type: 'text', content: '{{eta}}' },
    minimal: { type: 'image', source: 'sfSymbol', value: 'box.truck' }
  },
  data: {
    orderNumber: '12345',
    status: 'On the way',
    eta: '10 min',
    progress: 0.6
  }
});
console.log('Started activity:', activityId);

updateActivity

使用新数据更新一个现有的实时活动。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

await CapgoLiveActivities.updateActivity({
  activityId: 'abc123',
  data: {
    status: 'Arrived!',
    eta: 'Now',
    progress: 1.0
  },
  alertConfiguration: {
    title: 'Delivery Update',
    body: 'Your order has arrived!'
  }
});

endActivity

结束一个实时活动。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

await CapgoLiveActivities.endActivity({
  activityId: 'abc123',
  data: { status: 'Delivered' },
  dismissalPolicy: 'after',
  dismissAfter: Date.now() + 3600000 // 1 hour from now
});

完整参考

从使用 @capgo/capacitor-live-activities 继续

如果您正在使用 使用 @capgo/capacitor-live-activities 来规划原生媒体和界面行为,连接它与 @capgo/capacitor-live-activities 的实现细节在 @capgo/capacitor-live-activities, 入门指南 实现细节在入门指南, 使用 @capgo/capacitor-video-player 原生能力在使用 @capgo/capacitor-video-player, @capgo/capacitor-video-player 为 @capgo/capacitor-video-player 的实现细节, 使用 @capgo/capacitor-native-navigation 为 @capgo/capacitor-native-navigation 的原生能力