模板版本：v0.4.0

`react-native-progress`

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-progress 版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-progress	~5.1.0	@react-native-ohos/react-native-progress Releases	0.77/0.82	否	API12+	v5.0.1	Npm Address
@react-native-oh-tpl/react-native-progress	~5.0.1-0.0.3	@react-native-oh-tpl/react-native-progress Releases	0.72	否	API12+	v5.0.1	Npm Address

1. 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-tpl/react-native-progress Releases。

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

npm

# V0.72
npm install @react-native-oh-tpl/react-native-progress

# V0.77/0.82
npm install @react-native-ohos/react-native-progress

yarn

# V0.72
yarn install @react-native-oh-tpl/react-native-progress

# V0.77/0.82
yarn install @react-native-ohos/react-native-progress

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

使用时 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,
  },
});

2. Link

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

如未引入请参照react-native-svg-capi 进行引入

3. 约束与限制

3.1 兼容性

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

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@react-native-oh-tpl/react-native-progress Releases

RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25;
RNOH: 0.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12;
RNOH: 0.82.7 ; SDK: HarmonyOS 6.0.2 Release SDK; IDE: DevEco Studio 6.0.2.642; ROM: 6.0.0.328;

4. 属性

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

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

详情见react-native-progress

4.1 属性，用于所有进度组件:

Name	Description	Type	Required	Platform	HarmonyOS Support
animated	是否为“进度”添加动画。	boolean	No	All	Yes
indeterminate	如果设置为true，则指示器将旋转并且“progress”将被忽略。	boolean	No	All	Yes
indeterminateAnimationDuration	当设置indeterminate时，以毫秒为单位设置动画持续时间。	number	No	All	Yes
progress	指标所显示的进度。0和1之间的数字。	number	No	All	Yes
color	指示灯的填充颜色。	string	No	All	Yes
unfilledColor	剩余进度的颜色。	string	No	All	Yes
borderWidth	外边框的宽度，设置为“0”以移除。	number	No	All	Yes
borderColor	外边框的颜色。	string	No	All	Yes

4.2 `Progress.Bar`:

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

Name	Description	Type	Required	Platform	HarmonyOS Support
width	进度条的全宽度，设置为‘ null ’以使用自动伸缩大小。	number \| null	No	All	Yes
height	进度条的高度。	number	No	All	Yes
borderRadius	圆角，设置为‘ 0 ’禁用。	number	No	All	Yes
useNativeDriver	动画使用原生驱动。	boolean	No	All	Yes
animationConfig	传入‘ Animated ’函数的配置。	function	No	All	Yes
animationType	动画类型：`decay`， `timing`, `spring`。	'decay' \| 'timing' \| 'spring'	No	All	Yes

4.3 `Progress.Circle`:

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

Name	Description	Type	Required	Platform	HarmonyOS Support
size	圆的直径。	number	No	All	Yes
endAngle	确定圆的endAngle。一个介于0和1之间的数字。最终的角度将是数字乘以2π	number	No	All	Yes
thickness	内圆的厚度。	number	No	All	Yes
showsText	是否显示当前进度的文本表示。	boolean	No	All	Yes
formatText	返回要显示文本表示的字符串的一个函数。	function	No	All	Yes
textStyle	进度文本的样式，默认与circle相同的`color`， `fontSize`与`size` prop成比例。	TextStyle	No	All	Yes
allowFontScaling	是否遵守设备字体比例设置	boolean	No	All	Yes
direction	圆的方向顺时针或逆时针。	'clockwise' \| 'counter-clockwise'	No	All	Yes
strokeCap	圆形的笔画样式为‘ butt ’， ‘ square ’或‘ round ’。	'butt' \| 'square' \| 'round'	No	All	Yes
fill	填充内圆的颜色。	string	No	All	Yes

4.4 `Progress.Pie`:

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

Name	Description	Type	Required	Platform	HarmonyOS Support
size	饼图的直径。	number	No	All	Yes

4.5 `Progress.CircleSnail`:

Name	Description	Type	Required	Platform	HarmonyOS Support
animating	是否有圆形动画	boolean	No	All	Yes
hidesWhenStopped	是否需要在动画结束时移除圆。	boolean	No	All	Yes
size	圆的直径。	number	No	All	Yes
color	圆圈的颜色,使用一组颜色的彩虹效果。	string \| string[]	No	All	Yes
thickness	圆的厚度。	number	No	All	Yes
duration	动画持续时间。	number	No	All	Yes
spinDuration	自旋(轨道)动画的持续时间。	number	No	All	Yes
strokeCap	圆形的笔画样式为‘ butt ’， ‘ square ’或‘ round ’。	'butt' \| 'square' \| 'round'	No	All	Yes
direction	圆旋转的方向，“顺时针”或“逆时针”（默认）。	'clockwise' \| 'counter-clockwise'	No	All	Yes

5. 遗留问题

已解决：1、Progress.Circle 中的属性 fill 在 HarmonyOS 上默认显示黑色和默认无色不一致，定位是 svg 的属性配置有问题，当前通过修改 Circle.js 中默认 fill 的属性进行规避，后续 svg 修复该问题issue#6后，修改的代码会移除。
已解决：2、Progress.Circle中的属性color, unfilledColor,borderWith,borderColor中圆的颜色，在进行静态配置的时候颜色显示正常，在使用Button进行动态改变的时候，中间的圆会显示黑色和默认的颜色不一致，定位是svg的属性配置有问题，当前通过修改Circle.js中默认fill的属性进行规避，后续 svg 修复该问题issue#7后，修改的代码会移除。
已解决：3、Progress.pie中的属性color,borderWith,borderColor中内圆的颜色，在进行静态配置的时候颜色显示正常，在使用Button进行动态改变的时候，中间的圆会显示黑色和默认的颜色不一致，定位是svg的属性有问题，pie传入给svg的值是正常的，svg处理逻辑有问题，修改svg修复该问题issue#8

6. 其他

7. 开源协议

本项目基于 MIT License ，请自由地享受和参与开源。

react-native-progress

1. 安装与使用

npm

yarn

2. Link

3. 约束与限制

3.1 兼容性

4. 属性

4.1 属性，用于所有进度组件:

4.2 Progress.Bar:

4.3 Progress.Circle:

4.4 Progress.Pie:

4.5 Progress.CircleSnail:

5. 遗留问题

6. 其他

7. 开源协议

`react-native-progress`

4.2 `Progress.Bar`:

4.3 `Progress.Circle`:

4.4 `Progress.Pie`:

4.5 `Progress.CircleSnail`: