有谁知道如何在 React Native 中创建这个组件？

Question

我想创建一个组件，如所附图像中所示。 圆圈是进度条，蓝色是进度，我可以使用圆形进度条组件，但我不确定如何显示图像中的日期，蓝色文本将是当前日期. 如果有人知道如何做到这一点，请帮忙。

编辑：我想将日期添加到进度条中，我找到了圆形进度条组件。

Answer 1

这称为 循环进度

用法

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返回计时动画，以便您可以链接、并行运行等。

Answer 2

这就是您要寻找的... https://github.com/JesperLekland/react-native-svg-charts这是 ProgressCircle。 希望能帮到你...