HyperAIHyperAI

Command Palette

Search for a command to run...

在Expo中轻松构建iOS实时活动计时器:提升用户体验的秘诀

在iOS平台上,Live Activities是一项革新功能,允许应用程序在锁屏或动态岛显示实时更新,从而提高用户参与度。开发者Evan Bacon发现了一款名为expo-apple-targets的工具,它简化了JavaScript与iOS原生功能之间的桥接过程,使得在Expo React Native应用中实现此功能变得更加容易。 Live Activities的意义 苹果的人机交互指南将其描述为一种提供“当前、可一瞥的信息”的方式,非常适合用于需要实时关注的任务。例如,健身应用可以在用户做平板支撑时显示持续时间,食品配送应用可以追踪披萨的送达进度,或者共享汽车应用可以更新司机的到达时间。这些功能让用户无需解锁手机即可获得重要信息。 起因与经过 最初,Evan计划每秒更新一次Live Activity上的计时器,但很快就意识到这会导致系统过载。在一个Reddit论坛中,开发人员一致表示频繁更新计时器会导致CPU利用率飙升、电池耗电加快以及应用变得卡顿。因此,他决定使用startedAt和pausedAt的方法来记录时间,而不是直接更新计时器。 核心代码结构 LiveActivityAttributes Struct:定义了Live Activity的数据及其变化。 swift struct LiveActivityAttributes: ActivityAttributes { public struct ContentState: Codable, Hashable { var startedAt: Date var pausedAt: Date? // 帮助函数 } var activityName: String var activityIcon: String } 启动Live Activity:通过AsyncFunction暴露给JavaScript。 swift AsyncFunction("startActivity") { (activityName: String, activityIcon: String) -> String in if #available(iOS 16.2, *) { await self.endAllActivities() self.startedAt = Date() self.pausedAt = nil // 检查活动是否启用 // 设置属性并请求新的活动 } return "" } 暂停计时器:通过performPause更新Live Activity状态。 swift private func performPause(activityId: String?) async -> Bool { guard #available(iOS 16.2, *), self.pausedAt == nil else { return false } let now = Date() self.pausedAt = now let contentState = LiveActivityAttributes.ContentState(...) await activity.update(using: contentState) return true } 锁屏视图:用户在锁屏上看到的内容。 swift struct LockScreenLiveActivityView: View { let context: ActivityViewContext<LiveActivityAttributes> var body: some View { ZStack { // 背景颜色和圆角矩形 HStack { // 左侧:活动图标和名称 // 右侧:计时器显示和按钮(暂停/完成/继续) } } } } Dynamic Island视图:定义在Dynamic Island的三种显示模式(扩展、紧凑和最小)。 swift dynamicIsland: { context in DynamicIsland { DynamicIslandExpandedRegion(.leading) { ... } DynamicIslandExpandedRegion(.trailing) { ... } } compactLeading: { ... } compactTrailing: { ... } minimal: { ... } } _shared文件夹:确保主要应用和子目标(如Live Activity小部件)之间共享关键代码。 处理用户点击:使用AppIntents处理用户的交互。 CompleteIntent:当用户点击完成按钮时,发送通知打开应用。 PauseIntent:当用户点击暂停按钮时,发送通知更新计时器状态。 关键事件 onWidgetCompleteActivity:当用户通过小部件完成活动时,发送事件到JavaScript,更新UI或记录锻炼完成。 onLiveActivityUpdate:每当计时器状态变化(如暂停、继续)时,发送事件到JavaScript,保持UI同步。 为何这一切很重要 Live Activities不仅是一个简单的计时器,而是使应用感觉更像是原生iOS的一部分。通过expo-apple-targets和Expo Modules API,Evan能够轻松地将JavaScript与Swift桥接起来,提供了强大的框架支持。这使得代码更加整洁和易于维护,同时也提升了用户体验,让应用在锁屏和Dynamic Island上都能提供流畅的实时更新。 业内人士评价与公司背景 在科技社区中,这种利用原生和反应式编程相结合的方式来增强应用体验的做法受到了广泛的赞誉。Evan Bacon作为一名经验丰富的开发者,通过他的GitHub项目展示了这一功能的实现方法,为广大开发者提供了一个非常有价值的参考。GitHub链接:https://github.com/tarikfp/expo-live-activity-timer Expo是一款旨在简化React Native开发的开源工具集,特别适用于想要快速构建多平台应用程序的中小型团队。其模块系统(Expo Modules API)为企业级应用提供了丰富的扩展性和灵活性。通过这次项目,Expo再次证明了其在提升开发效率和优化用户体验方面的卓越能力。

相关链接