npm包 `react-native-percent-circle` 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

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

安装

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

npm install react-native-percent-circle --save

使用

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

import PercentCircle from 'react-native-percent-circle';

然后在代码中使用：

<PercentCircle radius={50} borderWidth={8} percent={30} color={"#ff0000"}></PercentCircle>

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

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