如何在React Native中为Android/iOS制作桌面小组件进度条？

React Native核心本身不支持桌面小组件开发，想要避免大量原生代码编写，最可行的方案是使用封装好的第三方库——这类库已经把原生端的小组件逻辑做了封装，只需要少量配置就能快速实现进度条小组件。

推荐库 #

• react-native-widget-kit：支持iOS和Android双平台，提供进度条、文本、图片等常用小组件组件，原生配置步骤简化，无需手动编写复杂的原生代码。
• react-native-app-widget：轻量级库，专注于常用桌面小组件场景，进度条组件的API设计简洁，适配主流RN版本。

代码示例（以react-native-widget-kit为例） #

1. 安装依赖 #

npm install react-native-widget-kit
# 或
yarn add react-native-widget-kit

2. 基础原生配置（简化步骤） #

• iOS：在Xcode中添加Widget Target（库文档提供一键配置脚本指引，无需手动编写Extension代码）
• Android：在AndroidManifest.xml中添加小组件声明（库提供代码片段，直接复制粘贴即可）

3. 实现进度条小组件 #

首先在APP内编写更新小组件数据的逻辑：

import { WidgetKit } from 'react-native-widget-kit';

// 更新进度条数据
const updateProgress = async (currentProgress) => {
  try {
    await WidgetKit.updateWidget({
      kind: 'TaskProgressWidget', // 与原生配置的小组件标识一致
      data: {
        progress: currentProgress, // 传入0-1区间的数值
        taskName: '项目开发',
      },
    });
  } catch (error) {
    console.log('更新小组件失败：', error);
  }
};

// 示例：在APP内触发更新
updateProgress(0.65);

然后定义小组件的UI模板：

import { ProgressBarWidget } from 'react-native-widget-kit';

// 进度条小组件模板
const ProgressWidgetTemplate = (props) => {
  return (
    <ProgressBarWidget
      progress={props.data.progress}
      title={props.data.taskName}
      progressColor="#2196F3"
      trackColor="#F0F0F0"
      cornerRadius={4}
    />
  );
};

// 注册小组件
WidgetKit.registerWidget({
  kind: 'TaskProgressWidget',
  template: ProgressWidgetTemplate,
  supportedSizes: ['medium', 'large'], // 支持的小组件尺寸
});

关键注意事项 #

• 桌面小组件的更新依赖APP内的数据同步，无法直接在小组件内交互修改进度（这是iOS和Android系统的通用限制）。
• 确保使用的库版本与你的React Native版本兼容，建议选择维护活跃的库以避免兼容性问题。
• 虽然不需要大量原生修改，但基础的平台配置步骤无法省略，这些步骤库的官方文档都有清晰指引。

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