npm包 `react-native-percent-circle` 使用教程

简介

react-native-percent-circle 是一个 React Native 的圆形进度条组件，它可以让开发者快速的构建出美观实用的进度条功能，而且它还提供了丰富的自定义属性，让开发者可以自由的调整进度条的样式，满足不同的设计需求。

安装

使用 npm 安装 react-native-percent-circle ：

--- ------- --------------------------- ------

使用

在使用之前，需要先导入该组件：

------ ------------- ---- ------------------------------

然后在代码中使用：

-------------- ----------- --------------- ------------ ----------------------------------

以上代码会渲染出一个圆形进度条，其参数说明如下：

• radius - 进度条的半径大小，是一个整型值，单位为 pt，默认为 50
• borderWidth - 进度条的边框宽度，是一个整型值，单位为 pt，默认为 8
• percent - 进度条的完成百分比，是一个浮点型值，范围为0-100之间，没有默认值
• color - 进度条的颜色，是一个字符串值，可以是颜色的名称或者 RGB 值等等，没有默认值

属性

• radius - 进度条的半径大小，是一个整型值，单位为 pt，默认为 50
• borderWidth - 进度条的边框宽度，是一个整型值，单位为 pt，默认为 8
• percent - 进度条的完成百分比，是一个浮点型值，范围为0-100之间，没有默认值
• color - 进度条的颜色，是一个字符串值，可以是颜色的名称或者 RGB 值等等，没有默认值
• bgColor - 进度条的背景颜色，是一个字符串值，可以是颜色的名称或者 RGB 值等等，没有默认值
• innerColor - 进度条的内部填充色，是一个字符串值，可以是颜色的名称或者 RGB 值等等，没有默认值
• shadowColor - 进度条的投影颜色，是一个字符串值，可以是颜色的名称或者 RGB 值等等，没有默认值
• shadowOn - 进度条的投影效果是否开启，是一个布尔值，为true则开启投影效果，默认为 false
• shadowOpacity - 进度条的投影透明度，是一个浮点型值，范围为0-1之间，没有默认值

示例代码

------ ------ - --------- - ---- --------
------ - ----- ---------- - ---- ---------------
------ ------------- ---- ------------------------------

------ ------- ----- --- ------- --------- -
  -------- -
    ------ -
      ----- -------------------------
        --------------
          -----------
          ----------------
          ------------
          -----------------
          -------------------
          ----------------------
          ---------------
          -----------------------
          -------------------
        --
      -------
    --
  -
-

----- ------ - -------------------
  ---------- -
    ----- --
    --------------- ---------
    ----------- ---------
  --
---

以上示例代码会渲染出一个完整的圆形进度条，它包含了自定义属性的演示，可以帮助读者更好的了解该组件的使用方法。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005667f81e8991b448e291a