react-native - react-native 中的循环进度

Question

我正在尝试在 react-native 中创建循环进度组件(如图所示)。

我已经尝试过 react-native 的艺术库。但对我来说它似乎有点复杂。只是如何完成它的概述将对我有很大帮助。

P.S.:库如this没有帮助，因为它不够灵活，无法在中心显示数字。

Answer 1

react-native-circular-progress允许您将 children(fill) 函数作为子函数传递。它允许您在循环进度中呈现任何子组件。

这是一个例子:

<AnimatedCircularProgress
  size={200}
  width={3}
  fill={this.state.fill}
  tintColor="#00e0ff"
  backgroundColor="#3d5875">
  {
    (fill) => (
      <Text style={styles.points}>
        { this.state.fill }
      </Text>
    )
  }
</AnimatedCircularProgress>