简介
react-native-circular-progress-no-ext-library 是一个基于 React Native 的环形进度条组件库。其特点是不依赖任何第三方库，可以方便地实现定制化的样式。
在本文中，我们将介绍如何使用 react-native-circular-progress-no-ext-library，包括安装、使用及配置等。
安装
在安装前，请确保您已经安装并配置好了 React Native。
使用 npm 进行安装：
npm install react-native-circular-progress-no-ext-library --save
使用
我们可以通过简单的组件配置创建一个带有进度条的页面。
首先，在需要使用环形进度条的页面中引入组件：
import CircularProgress from 'react-native-circular-progress-no-ext-library';
然后，在页面中使用组件：
-- -------------------- ---- ------- ----------------- ------------ -- -- ------------ -- -- ---------------- -- ---- --------------- -- ---- ---------------------- -- --- --------------------- -- ----- --------------- -- ---- ------------ --------- -- -- -- ------ ---
配置
| api | 类型 | 默认值 | 说明 |
|---|---|---|---|
| percent | number | 0 | 进度，0~100 |
| radius | number | 50 | 环形半径 |
| strokeWidth | number | 10 | 环形宽度 |
| color | string | '#3f3d3d' | 环形颜色 |
| backgroundColor | string | '#e3e3e3' | 背景颜色 |
| outerFillColor | string | '#fff' | 外环填充色 |
| text | string / func | null | 进度显示，可以为字符串或者方法 |
| textStyle | object | {} | 进度显示样式 |
percent
进度值，0~100 之间的数字。
radius
圆的半径，控制环形图的大小，单位为像素。
strokeWidth
环形宽度，单位为像素。
color
环形的颜色，可以输入颜色名称或者颜色值。
backgroundColor
环形背景颜色，可以输入颜色名称或者颜色值。
outerFillColor
外环填充颜色，可以输入颜色名称或者颜色值。
text
进度显示，可以为字符串或者方法。
textStyle
进度显示的样式。
示例代码
以下为一个完整的示例代码，可以直接复制到项目中使用：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ----------- ----- ---- - ---- ---------------
------ ---------------- ---- ------------------------------------------------
----- -------------------- ------- --------- -
-------- -
----- ---- - ---
------ -
----------- --------------------------
----- -------------------------
-----------------
--------------
------------
----------------
---------------
-----------------
----------------------------
-------------------------
---------------------
--
-------
----- -------------------------
-----------------
------------
-----------
----------------
---------------
-------------------------
---------------------
--
-------
-------------
--
-
-
----- ------ - -------------------
----------- -
----- --
---------------- ----------
--
---------- -
----------- ---------
--------------- ---------
---------- ---
--
---------- -
--------- ---
----------- -------
------ ----------
--
---
------ ------- ---------------------结论
react-native-circular-progress-no-ext-library 是一个非常好用的 React Native 环形进度条库，可以轻松创建一个自定义的环形进度条。本文对使用方法、配置等作了介绍，相信大家已经可以轻松上手了。祝大家使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f84238a385564ab6c70