有誰知道如何在 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。 希望能幫到你...