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

Question

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

当前：

预计：

谢谢大家！

Answer 1

您可以安装 react-native-circular-gradient-progress 来实现它。

如果你正在使用 npm 那么请写

npm install react-native-circular-gradient-progress

如果你用的是yarn那么请写

yarn add 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;

你会得到这样的结果：

有关 props 的进一步解释，您可以阅读 documentation。