You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native带倒计时可启停推送通知实现方案求助

示例通知1
示例通知2

React Native 倒计时/计时器通知实现需求

我在开发React Native项目时需要实现带倒计时/计时器的推送通知,要求支持任务和倒计时的暂停、启动,类似番茄钟应用的通知功能——能通过通知暂停任务并显示剩余时长。目前只在NPM上找到react-native-custom-timer-notification这个依赖,想问问有没有其他能实现该功能的依赖。

react-native-custom-timer-notification 使用示例

// 参数说明
// payload:点击或取消通知时会收到该内容
// title:通知标题
// body:通知内容
// id:唯一标识编号
// date:倒计时结束的时间点

import { TimerNotification, onEvent, RemoveTimer } from "react-native-custom-timer-notification";

// ...

// 监听通知点击或取消事件
onEvent(event => {
  console.log(event);
});

// 移除指定计时器
RemoveTimer(160211114);

// 触发倒计时通知
TimerNotification({
  payload: JSON.stringify('notificationOpen?.data'),
  title: 'My notification',
  body: 'Much longer text that cannot fit one line... ',
  id: 160211114,
  remove: false, // 可选参数
  foreground: false,
  date: new Date(Date.now() + 20000),
  isCountDown: true, // false 表示正向计时
  setCustomContentView: true // 可选参数
});

其他可选依赖推荐

  • react-native-push-notification:功能全面的通知库,结合本地定时器可实现倒计时通知。需自行封装倒计时逻辑,定时更新通知内容展示剩余时长,同时支持通过通知交互事件处理暂停/启动操作。
  • react-native-notifications:原生级通知处理库,支持自定义通知布局与交互。可搭配react-native-background-timer在后台运行倒计时,通过更新通知展示剩余时间,监听通知按钮点击事件实现暂停/启动。
  • @notifee/react-native:Firebase官方推荐的通知库,支持自定义通知UI与后台任务。可利用其定时通知功能结合本地状态管理,实现倒计时的暂停、启动,以及通知内的交互控制。

内容的提问来源于stack exchange,提问作者436onn

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.10 09:31:35