# react-native-progress

**Repository Path**: kunyuan-hongke/react-native-progress

## Basic Information

- **Project Name**: react-native-progress
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-20
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2

# `ohmi/react-native-progress`

[![Supported platforms](https://img.shields.io/badge/platforms-android%20%7C%20ios%20%7C%20harmony%20-lightgrey.svg) ](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fvonovak%2Freact-native-progress)[![License](https://img.shields.io/badge/license-MIT-green.svg)](https://gitee.com/kunyuan-hongke/react-native-progress/blob/master/LICENSE)

> [!TIP][Gitee 地址](https://gitee.com/kunyuan-hongke/react-native-progress)

## 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：[@ohmi/react-native-progress Releases](https://gitee.com/kunyuan-hongke/react-native-progress/releases) 。对于未发布到 npm 的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装 tgz 包。

进入到工程目录并输入以下命令：

#### **npm**

```
npm install @ohmi/react-native-progress
```

#### **yarn**

```
yarn add @ohmi/react-native-progress
```

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名不变。

```
import React, { useEffect } from "react";
import { StyleSheet, View, Text } from "react-native";
import * as Progress from "react-native-progress";

const ProgressExample = () => {
  const [progress, setProgress] = React.useState(0);
  const [indeterminate, setIndeterminate] = React.useState(true);

  useEffect(() => {
    let interval: ReturnType<typeof setInterval>;
    const timer = setTimeout(() => {
      setIndeterminate(false);
      interval = setInterval(() => {
        setProgress((prevProgress) => {
          if (prevProgress >= 1) {
            return 0;
          }
          return Math.min(1, prevProgress + Math.random() / 5);
        });
      }, 500);
    }, 1500);
    return () => {
      clearTimeout(timer);
      clearInterval(interval);
    };
  }, []);

  return (
    <View>
      <Text style={styles.welcome}>Progress Example</Text>
      <Progress.Bar
        style={styles.progress}
        progress={progress}
        indeterminate={indeterminate}
      />
      <View style={styles.circles}>
        <Progress.Circle
          style={styles.progress}
          progress={progress}
          indeterminate={indeterminate}
        />
        <Progress.Pie
          style={styles.progress}
          progress={progress}
          indeterminate={indeterminate}
        />
        <Progress.Circle
          style={styles.progress}
          progress={progress}
          indeterminate={indeterminate}
          direction="counter-clockwise"
        />
      </View>
      <View style={styles.circles}>
        <Progress.CircleSnail style={styles.progress} />
        <Progress.CircleSnail
          style={styles.progress}
          color={["#F44336", "#2196F3", "#009688"]}
        />
      </View>
    </View>
  );
};
export default ProgressExample;

const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
  bar: {
    flexDirection: "row",
    justifyContent: "center",
  },
  circles: {
    flexDirection: "row",
    justifyContent: "center",
  },
  progress: {
    margin: 10,
  },
});
```

## Link

本库 HarmonyOS 侧实现依赖 @ohmi/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照[@ohmi/react-native-svg](https://gitee.com/rn-mi/react-native-svg/blob/master/README.md) 进行引入

## 约束与限制

### 兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@ohmi/react-native-progress Releases](https://gitee.com/kunyuan-hongke/react-native-progress/releases)

## 属性

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### Properties for all progress components:

| Name                           | Description                                                                  | Type    | Required | Platform | HarmonyOS Support |
| ------------------------------ | ---------------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- |
| animated                       | Whether or not to animate changes to `progress`.                             | boolean | No       | All      | Yes               |
| indeterminate                  | If set to true, the indicator will spin and `progress` prop will be ignored. | boolean | No       | All      | Yes               |
| indeterminateAnimationDuration | Sets animation duration in milliseconds when indeterminate is set.           | number  | No       | All      | Yes               |
| progress                       | Progress of whatever the indicator is indicating. A number between 0 and 1.  | number  | No       | All      | Yes               |
| color                          | Fill color of the indicator.                                                 | string  | No       | All      | Yes               |
| unfilledColor                  | Color of the remaining progress.                                             | string  | No       | All      | Yes               |
| borderWidth                    | Width of outer border, set to `0` to remove.                                 | number  | No       | All      | Yes               |
| borderColor                    | Color of outer border.                                                       | string  | No       | All      | Yes               |

### `Progress.Bar`:

All of the props under _Properties_ in addition to the following:

| Name            | Description                                                                    | Type                            | Required | Platform | HarmonyOS Support |
| --------------- | ------------------------------------------------------------------------------ | ------------------------------- | -------- | -------- | ----------------- |
| width           | Full width of the progress bar, set to `null` to use automatic flexbox sizing. | number \| null                  | No       | All      | Yes               |
| height          | Height of the progress bar.                                                    | number                          | No       | All      | Yes               |
| borderRadius    | Rounding of corners, set to `0` to disable.                                    | number                          | No       | All      | Yes               |
| useNativeDriver | Use native driver for the animations.                                          | boolean                         | No       | All      | Yes               |
| animationConfig | Config that is passed into the `Animated` function.                            | function                        | No       | All      | Yes               |
| animationType   | Animation type to animate the progress, one of: `decay`, `timing`, `spring`.   | 'decay' \| 'timing' \| 'spring' | No       | All      | Yes               |

### `Progress.Circle`:

All of the props under _Properties_ in addition to the following:

| Name             | Description                                                                                                                  | Type                               | Required | Platform | HarmonyOS Support |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- |
| size             | Diameter of the circle.                                                                                                      | number                             | No       | All      | Yes               |
| endAngle         | Determines the endAngle of the circle. A number between `0` and `1`. The final endAngle would be the number multiplied by 2π | number                             | No       | All      | Yes               |
| thickness        | Thickness of the inner circle.                                                                                               | number                             | No       | All      | Yes               |
| showsText        | Whether or not to show a text representation of current progress.                                                            | boolean                            | No       | All      | Yes               |
| formatText       | A function returning a string to be displayed for the textual representation.                                                | function                           | No       | All      | Yes               |
| textStyle        | Styles for progress text, defaults to a same `color` as circle and `fontSize` proportional to `size` prop.                   | TextStyle                          | No       | All      | Yes               |
| allowFontScaling | Whether or not to respect device font scale setting.                                                                         | boolean                            | No       | All      | Yes               |
| direction        | Direction of the circle `clockwise` or `counter-clockwise`.                                                                  | 'clockwise' \| 'counter-clockwise' | No       | All      | Yes               |
| strokeCap        | Stroke Cap style for the circle `butt`, `square` or `round`.                                                                 | 'butt' \| 'square' \| 'round'      | No       | All      | Yes               |
| fill             | Fill color of the inner circle.                                                                                              | string                             | No       | All      | Yes               |

### `Progress.Pie`:

All of the props under _Properties_ in addition to the following:

| Name | Description          | Type   | Required | Platform | HarmonyOS Support |
| ---- | -------------------- | ------ | -------- | -------- | ----------------- |
| size | Diameter of the pie. | number | No       | All      | Yes               |

### `Progress.CircleSnail`:

| Name             | Description                                                                               | Type                               | Required | Platform | HarmonyOS Support |
| ---------------- | ----------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- |
| animating        | If the circle should animate.                                                             | boolean                            | No       | All      | Yes               |
| hidesWhenStopped | If the circle should be removed when not animating.                                       | boolean                            | No       | All      | Yes               |
| size             | Diameter of the circle.                                                                   | number                             | No       | All      | Yes               |
| color            | Color of the circle, use an array of colors for rainbow effect.                           | string \| string[]                 | No       | All      | Yes               |
| thickness        | Thickness of the circle.                                                                  | number                             | No       | All      | Yes               |
| duration         | Duration of animation.                                                                    | number                             | No       | All      | Yes               |
| spinDuration     | Duration of spin (orbit) animation.                                                       | number                             | No       | All      | Yes               |
| strokeCap        | Stroke Cap style for the circle `butt`, `square` or `round`.                              | 'butt' \| 'square' \| 'round'      | No       | All      | Yes               |
| direction        | Direction in which the circle spins, either "clockwise" or "counter-clockwise" (default). | 'clockwise' \| 'counter-clockwise' | No       | All      | Yes               |

## 遗留问题

- 已解决：1、Progress.Circle 中的属性 fill 在 HarmonyOS 上默认显示黑色和默认无色不一致，定位是 svg 的属性配置有问题，当前通过修改 Circle.js 中默认 fill 的属性进行规避，后续 svg 修复该问题[issue#6](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-svg%2Fissues%2F6)后，修改的代码会移除。
- 已解决：2、Progress.Circle 中的属性 color, unfilledColor,borderWith,borderColor 中圆的颜色，在进行静态配置的时候颜色显示正常，在使用 Button 进行动态改变的时候，中间的圆会显示黑色和默认的颜色不一致，定位是 svg 的属性配置有问题，当前通过修改 Circle.js 中默认 fill 的属性进行规避，后续 svg 修复该问题[issue#7](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-svg%2Fissues%2F7)后，修改的代码会移除。
- 已解决：3、Progress.pie 中的属性 color,borderWith,borderColor 中内圆的颜色，在进行静态配置的时候颜色显示正常，在使用 Button 进行动态改变的时候，中间的圆会显示黑色和默认的颜色不一致，定位是 svg 的属性有问题，pie 传入给 svg 的值是正常的，svg 处理逻辑有问题，修改 svg 修复该问题[issue#8](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-svg%2Fissues%2F8)

## 其他

## 开源协议

本项目基于 [MIT License](https://gitee.com/kunyuan-hongke/react-native-progress/blob/master/LICENSE) ，请自由地享受和参与开源。