如何添加圆圈以反应原生进度条答案

【问题标题】：How to add cirle to react native progress bar如何添加圆圈以反应原生进度条
【发布时间】：2021-08-02 03:09:51
【问题描述】：

我的设计有问题。

这是设计：

有什么方法可以像这个设计一样在进度条的顶部添加一个圆圈。

我正在使用 react-native-circular-progress 库

我几乎使用图书馆的道具。这是我的代码：

const Progress = ({fill}: Types) => {
  const {translations} = useContext(LocalizationContext);

  return (
    <>
      <View style={PropertyDetailStyles.dailyCapWrapper}>
        <AnimatedCircularProgress
          size={240}
          fill={fill}
          arcSweepAngle={181}
          rotation={270}
          lineCap="round"
          tintColor={fill >= 100 ? TERTIARY_YELLOW : SECONDARY_BLUE}
          backgroundColor={TERTIARY_GREY}
          width={10}
          backgroundWidth={10}
          duration={1000}
          children={() => {
            return (
              <Text style={PropertyDetailStyles.dailyCapText}>
                {fill >= 100
                  ? translations.visitDetail.dayPassUnLock
                  : translations.visitDetail.dayPass}
              </Text>
            );
          }}
          childrenContainerStyle={
            PropertyDetailStyles.dailyCapChildrenContainer
          }
        />
        <Image
          style={PropertyDetailStyles.dailyCapImage}
          source={
            fill >= 100
              ? require('../../../../../assets/image/lineProgressMax.png')
              : require('../../../../../assets/image/lineProgress.png')
          }
        />
      </View>
    </>
  );
};

export default Progress;

非常感谢。

【问题讨论】：

发布一些你尝试过的代码？
你能发布你得到的结果的截图吗？
你可以使用这个库github.com/bartgryszko/react-native-circular-progress
@HarshitMadhav 我正在使用https://github.com/bartgryszko/react-native-circular-progress。我在进度顶部遇到了圈子问题
@PavanTank 我添加了我得到的当前结果。

标签： react-native progress-bar react-native-svg

【解决方案1】：

您将需要使用组件属性renderCap，它只会采用自定义 SVG 元素。因此，您可以例如从库 react-native-svg 导入 Circle 组件并执行以下操作：

import * as React from 'react';
import { Text, View } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';
import { Circle } from 'react-native-svg';


export default function App() {
  return (
    <View>
      <AnimatedCircularProgress
        size={120}
        width={15}
        fill={100}
        tintColor="#00e0ff"
        backgroundColor="#3d5875"
        padding={10}
        arcSweepAngle={180}
        // This is the property you are looking for:
        renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="blue" />}
        
      />
    </View>
  )
}

通过将此属性应用于您的组件，您将能够获得所需的结果。查看外观的现场演示 here。

【讨论】：