如何给 React Native 进度条添加圆圈

Question

我的设计有问题。

这是设计：

有什么方法可以像这样在进度条的顶部加一个圆圈吗？

我正在使用 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;

Answer 1

您将需要使用组件属性

renderCap

，它只会采用自定义 SVG 元素。例如，您可以从库

Circle

导入

react-native-svg

组件并执行以下操作：

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>
  )
}

通过将此属性应用于您的组件，您将能够获得所需的结果。在这里.

观看它的现场演示