react-native - 如何在 React Native 中的一个圆圈上的一个或多个指定位置填充进度

Question

我如何在循环进度上分配一个或多个进度，如下所示我正在使用库 react-native-circular-progress

当前的：

预计：

谢谢大家！

Answer 1

您可以安装react-native-circular-gradient-progress来实现这一点。

如果您使用的是 npm，那么请写

npm install react-native-circular-gradient-progress

如果你使用纱线，那么请写

纱线添加反应原生循环梯度进度

你可以像下面这样使用它：

import React from "react";
import { CircularProgress } from "react-native-circular-gradient-progress";
 
const HomePage: React.FunctionComponent = () => (
  <CircularProgress
    color="#F00"
    size={size}
    progress={progress}
  />
)
 
export default HomePage;

你会得到这样的结果：

有关道具的进一步说明，您可以阅读文档。