React Native Circular Progress API详解：掌握所有配置选项和属性-CSDN博客

React Native Circular Progress API详解：掌握所有配置选项和属性

【免费下载链接】react-native-circular-progress React Native component for creating animated, circular progress with ReactART 项目地址: https://gitcode.com/gh_mirrors/re/react-native-circular-progress

React Native Circular Progress 是一个基于 ReactART 的组件库，专为创建动画圆形进度条而设计。它提供了丰富的配置选项和灵活的属性设置，让开发者能够轻松实现各种视觉效果的圆形进度指示器。本文将详细解析其核心 API，帮助你掌握所有配置选项和属性，打造符合需求的进度展示组件。

核心组件概述

该库主要提供两个核心组件，分别满足静态和动态进度展示需求：

CircularProgress：基础静态圆形进度组件，位于 src/CircularProgress.js
AnimatedCircularProgress：带动画效果的圆形进度组件，位于 src/AnimatedCircularProgress.js

这两个组件共享大部分基础属性，同时 Animated 版本增加了动画相关的特有配置。

基础属性详解

尺寸与布局设置

size

类型：number | Animated.Value
必填：是
说明：圆形进度条的整体尺寸（直径），单位为像素
示例：size={200}

width

类型：number
必填：是
说明：进度条的线宽
示例：width={10}

backgroundWidth

类型：number
默认值：与 width 相同
说明：背景圆环的线宽
示例：backgroundWidth={8}

padding

类型：number
默认值：0
说明：内边距，用于调整进度条与内部内容的间距
示例：padding={5}

视觉样式属性

tintColor

类型：string
默认值：'black'
说明：进度条的前景色
示例：tintColor="#4CAF50"

backgroundColor

类型：string
默认值：无
说明：背景圆环的颜色，不设置则不显示背景
示例：backgroundColor="#E0E0E0"

lineCap

类型：string
默认值：'butt'
说明：线条末端样式，可选值：'butt' | 'round' | 'square'
示例：lineCap="round"

fillLineCap

类型：string
默认值：与 lineCap 相同
说明：进度条末端样式，优先级高于 lineCap
示例：fillLineCap="round"

进度控制属性

fill

类型：number
必填：是
说明：进度值，范围 0-100
示例：fill={60}

arcSweepAngle

类型：number
默认值：360
说明：圆弧的角度范围，360 为完整圆形
示例：arcSweepAngle={270}

rotation

类型：number
默认值：90
说明：圆弧的旋转角度，单位为度
示例：rotation={180}

高级样式属性

dashedBackground

类型：object
默认值：{ width: 0, gap: 0 }
说明：背景圆环的虚线样式
示例：dashedBackground={{ width: 5, gap: 3 }}

dashedTint

类型：object
默认值：{ width: 0, gap: 0 }
说明：进度条的虚线样式
示例：dashedTint={{ width: 5, gap: 3 }}

动画属性详解（AnimatedCircularProgress）

AnimatedCircularProgress 继承了 CircularProgress 的所有属性，并添加了以下动画相关属性：

动画控制

duration

类型：number
默认值：500
说明：动画持续时间，单位为毫秒
示例：duration={1000}

prefill

类型：number
默认值：0
说明：动画开始前的初始进度值
示例：prefill={20}

delay

类型：number
默认值：0
说明：动画延迟开始时间，单位为毫秒
示例：delay={500}

easing

类型：func
默认值：Easing.out(Easing.ease)
说明：动画缓动函数
示例：easing={Easing.bounce}

颜色过渡

tintColorSecondary

类型：string
默认值：无
说明：进度条的结束颜色，与 tintColor 形成渐变色效果
示例：tintColor="#FF5722" tintColorSecondary="#4CAF50"

回调函数

onAnimationComplete

类型：func
默认值：无
说明：动画完成时的回调函数
示例：onAnimationComplete={() => console.log('动画完成')}

onFillChange

类型：func
默认值：无
说明：进度值变化时的回调函数
示例：onFillChange={(value) => console.log('当前进度:', value)}

容器与内容属性

样式容器

style

类型：object | array
默认值：无
说明：组件容器的样式
示例：style={{ margin: 10, alignSelf: 'center' }}

childrenContainerStyle

类型：object
默认值：无
说明：内部子元素容器的样式
示例：childrenContainerStyle={{ backgroundColor: 'white' }}

子元素

children

类型：func
默认值：无
说明：内部子元素渲染函数，接收当前进度值作为参数
示例：

children={(fill) => (
  <Text style={{ fontSize: 20 }}>{Math.round(fill)}%</Text>
)}

renderCap

类型：func
默认值：无
说明：自定义进度条末端帽子的渲染函数
示例：

renderCap={({ center }) => (
  <Circle cx={center.x} cy={center.y} r={5} fill="red" />
)}

安装与基本使用

要开始使用 React Native Circular Progress，首先需要克隆仓库并安装依赖：

git clone https://gitcode.com/gh_mirrors/re/react-native-circular-progress
cd react-native-circular-progress
npm install

基础静态进度条示例

import CircularProgress from 'react-native-circular-progress';

// 在组件中使用
<CircularProgress
  size={150}
  width={15}
  fill={75}
  tintColor="#00e0ff"
  backgroundColor="#3d5875"
/>

带动画效果的进度条示例

import AnimatedCircularProgress from 'react-native-circular-progress';

// 在组件中使用
<AnimatedCircularProgress
  size={200}
  width={20}
  fill={80}
  tintColor="#ff6b6b"
  backgroundColor="#f1f1f1"
  duration={1500}
  lineCap="round"
>
  {(fill) => (
    <Text style={{ fontSize: 30 }}>{Math.round(fill)}%</Text>
  )}
</AnimatedCircularProgress>

常见配置组合与效果

1. 半圆形进度条

<CircularProgress
  size={180}
  width={12}
  fill={70}
  arcSweepAngle={180}
  rotation={270}
  tintColor="#4CAF50"
  backgroundColor="#e9ecef"
/>

2. 渐变色动画进度条

<AnimatedCircularProgress
  size={220}
  width={18}
  fill={65}
  tintColor="#FF9800"
  tintColorSecondary="#F44336"
  duration={2000}
  lineCap="round"
/>

3. 虚线样式进度条

<CircularProgress
  size={160}
  width={8}
  fill={45}
  tintColor="#9C27B0"
  backgroundColor="#f3e5f5"
  dashedTint={{ width: 6, gap: 4 }}
  lineCap="round"
/>

总结

React Native Circular Progress 提供了丰富的配置选项，使开发者能够轻松创建各种样式的圆形进度条。通过灵活运用 size、width、tintColor 等基础属性，结合 Animated 版本的动画效果，可以满足不同场景下的进度展示需求。无论是简单的静态进度指示，还是复杂的动态进度动画，这个组件库都能提供简洁而强大的解决方案。

建议在实际项目中，根据具体的设计需求，合理组合使用各种属性，创造出既美观又实用的进度指示器。同时，也可以通过 renderCap 和 children 属性，进一步自定义进度条的外观和内部内容，实现更具个性化的视觉效果。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考