react-native 的循环进展

Question

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

我试过浏览 react-native 的艺术库。但对我来说似乎有点复杂。只是如何做到这一点的大纲会对我有很大帮助。

PS：像这样的库没有帮助，因为它不够灵活，无法在中心显示数字。

Answer 1

react-native-circular-progress允许您将子项（填充）函数作为子项传递。它允许您在循环进度一中渲染任何子组件。

下面是一个例子：

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