模板版本：v0.2.2

ohmi/react-native-progress

[!TIP]Gitee 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@ohmi/react-native-progress Releases 。对于未发布到 npm 的旧版本，请参考安装指南安装 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 进行引入

约束与限制

兼容性

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

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@ohmi/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后，修改的代码会移除。
• 已解决：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

其他

开源协议

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