我想创建一个如图所示的组件。圆圈是进度条，蓝色是进度，我可以为此使用圆形进度条组件，但我不确定如何显示图像中的日期，蓝色文本将是当前日期.如果有人知道如何执行此操作，请提供帮助。
编辑：我想给进度条添加日期，我找到了循环进度条组件。
【问题讨论】：
标签： react-native
用法
import { AnimatedCircularProgress } from 'react-native-circular-progress';
<AnimatedCircularProgress
size={120}
width={15}
fill={100}
tintColor="#00e0ff"
onAnimationComplete={() => console.log('onAnimationComplete')}
backgroundColor="#3d5875" />
您还可以定义一个函数来接收当前进度，例如将其显示在圆圈内：
<AnimatedCircularProgress
size={200}
width={3}
fill={this.state.fill}
tintColor="#00e0ff"
backgroundColor="#3d5875">
{
(fill) => (
<Text>
{ this.state.fill }
</Text>
)
}
</AnimatedCircularProgress>
您还可以定义一个函数，该函数将接收进度圈顶部的位置并呈现自定义 SVG 元素：
<AnimatedCircularProgress
size={120}
width={15}
fill={100}
tintColor="#00e0ff"
backgroundColor="#3d5875"
padding={10}
renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="blue" />}
/>
最后，您可以手动触发基于持续时间的计时动画，方法是在组件上放置一个 ref 并调用 animate(toValue, duration, easing) 函数，如下所示：
<AnimatedCircularProgress
ref={(ref) => this.circularProgress = ref}
...
/>
this.circularProgress.animate(100, 8000, Easing.quad); // Will fill the progress bar linearly in 8 seconds
animate-function 返回计时动画，以便您可以链接、并行运行等。
【讨论】：
这就是你要找的... https://github.com/JesperLekland/react-native-svg-charts 它是进步圈。希望能帮到你...
【讨论】：