如何在React Native进度条中添加圆圈

tpgth1q7 于 2023-04-07 发布在 React

关注(0)|答案(1)|浏览(189)

我对设计有意见。
这就是设计：

有没有什么方法可以像这样在进度条的顶部添加一个圆圈？
使用react-native-circular-progress库。

我几乎都用图书馆的 prop 。
这是我的代码：

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;

react-native

来源：https://stackoverflow.com/questions/68615959/how-to-add-circle-to-react-native-progress-bar

1条答案

按热度按时间

kuhbmx9i1#

你需要使用组件属性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的实时演示。

赞(0）回复(0）举报 2023-04-07

我来回答

如何在React Native进度条中添加圆圈

1条答案

相关问题

热门标签

最新问答