npm 包 react-native-progress-fixed 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 React Native 在移动端应用开发中的普及，开发人员对于移动应用中的 UI 进度条展示有了更高的要求，这时候，我们就需要一个轻便便的进度条库来轻松实现我们的进度条需求。在 npm 包中，react-native-progress-fixed 就是一个非常不错的进度条库，让我们来看看 react-native-progress-fixed 的使用方法。

安装

npm install react-native-progress-fixed --save

由于 react-native-progress-fixed 是基于 react-native-progress 库的升级版本，我们还需要安装该库。

npm install react-native-progress@3.0.1 --save

基本使用

react-native-progress-fixed 提供了多种不同的进度条样式，用户可以选择适合自己需求的进度条类型。下面我们以 Example 为例来介绍 react-native-progress-fixed 的使用方法。

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

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

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

上述代码中，我们使用了 react-native-progress-fixed 的五种进度条效果，分别是：

ProgressCircle: 圆形进度条
ProgressPie: 饼图展示进度条
ProgressImage: 自定义 SVG 进度条
ProgressLine: 水平进度条
ProgressCircleSnail: 圆形旋转进度条

除了以上 5 种进度条之外，react-native-progress-fixed 还提供了多种其他进度条类型供开发者使用。

进阶使用

react-native-progress-fixed 还提供了多种进度条属性和方法，使开发者可以根据自己的需求，对进度条的样式和行为进行修改和管理。

下面，我们来一一介绍这些进阶属性和方法。

属性

ProgressCircle

属性名	类型	含义
progress	number	进度条完成度，取值 [0, 1]
size	number	进度条大小，单位为像素
color	string	进度条颜色，采用 CSS 颜色名或十六进制颜色值
unfilledColor	string	进度条未填充颜色，采用 CSS 颜色名或十六进制颜色值
thickness	number	进度条厚度，取值范围为[0, 1>
strokeCap	string	进度条头样式，可以为 round、butt 或 square
borderColor	string	边框颜色，采用 CSS 颜色名或十六进制颜色值
borderWidth	number	边框宽度，单位为像素
fill	string	进度条背景颜色，采用 CSS 颜色名或十六进制颜色值
textStyle	style	进度数字样式
direction	string	进度条方向，可以为 `clockwise` 或 `counter-clockwise`
rotation	number	进度条旋转角度，单位为度数
children	node	进度条中的其他内容，比如自定义文字说明
indeterminate	boolean	是否显示进度动画
indeterminateAnimationDuration	number	动画切换时间，默认 ~1s

ProgressPie

属性名	类型	含义
progress	number	进度条完成度，取值 [0, 1]
size	number	进度条大小，单位为像素
color	string	进度条颜色，采用 CSS 颜色名或十六进制颜色值
unfilledColor	string	进度条未填充颜色，采用 CSS 颜色名或十六进制颜色值
borderWidth	number	边框宽度，单位为像素
borderColor	string	边框颜色，采用 CSS 颜色名或十六进制颜色值
backgroundColor	string	进度条背景颜色，采用 CSS 颜色名或十六进制颜色值
children	node	进度条中的其他内容，比如自定义文字说明

ProgressImage

属性名	类型	含义
source	svg	图片源，支持 svg 格式图片
indicatorWidth	number	进度条指示宽度
indicatorHeight	number	进度条指示高度
indicatorStrokeWidth	number	进度条指示宽度
indicatorStrokeColor	string	进度条指示宽度

ProgressLine

属性名	类型	含义
progress	number	进度条完成度，取值 [0, 1]
size	number	进度条高度，单位为像素
color	string	进度条颜色，采用 CSS 颜色名或十六进制颜色值
unfilledColor	string	进度条未填充颜色，采用 CSS 颜色名或十六进制颜色值
borderWidth	number	边框宽度，单位为像素
borderColor	string	边框颜色，采用 CSS 颜色名或十六进制颜色值
backgroundColor	string	进度条背景颜色，采用 CSS 颜色名或十六进制颜色值
children	node	进度条中的其他内容，比如自定义文字说明

ProgressCircleSnail

属性名	类型	含义
color	string[]	圆形旋转进度条的颜色数组，支持同时展示多种进度颜色
size	number	进度条大小，单位为像素
thickness	number	进度条厚度，取值范围为[0, 1>
strokeCap	string	进度条头样式，可以为 round、butt 或 square
style	View.style	自定义进度条样式
duration	number	每个圆形元素的动画时间，单位为秒
spinDuration	number	整个进度条动画时间，单位为秒，当设置该属性时，优先使用 spinRate
spinRate	number	圆形旋转频率，1/s
hideBackgroud	boolean	是否隐藏背景

方法

ProgressCircle

方法名	参数	是否必填	返回值	功能
animate	toValue: number, duration: number, ease?: (t: number) => number, callback?: () => void	必填	无	对进度条进行动画效果
animate.timing	toValue: number, duration: number, ease?: (t: number) => number, callback?: () => void, animation?: () => void	必填	无	对进度条进行 timing 动画效果

ProgressLine

方法名	参数	是否必填	返回值	功能
animate	toValue: number, duration: number, ease?: (t: number) => number, callback?: () => void	必填	无	对进度条进行动画效果
animate.timing	toValue: number, duration: number, ease?: (t: number) => number, callback?: () => void, animation?: () => void	必填	无	对进度条进行 timing 动画效果

ProgressCircleSnail

方法名	参数	是否必填	返回值	功能
animate	toValue: number, duration: number, ease?: (t: number) => number, callback?: () => void	必填	无	对进度条进行动画效果
animate.looping	toValue: number, duration: number, ease?: (t: number) => number, callback?: () => void, animation?: () => void	必填	无	对进度条进行 looping 动画效果

结语

在本篇文章中，我们学习了 react-native-progress-fixed 的安装和基本使用方法，并且介绍了 react-native-progress-fixed 的多种进阶属性和方法，这些属性和方法可以帮助开发者更加灵活地进行进度条展示和管理，为移动应用开发提供更多的可扩展性和可定制性。如果你的移动应用中需要展示进度条，那么 react-native-progress-fixed 绝对是一个非常不错的 npm 包选择，它可以帮助你轻松实现各种进度条需求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562bf81e8991b448e000e