探索React Native Circular Progress：一款高效、灵活的进度环组件

import React from 'react';
import { View, StyleSheet } from 'react-native';
import ProgressCircle from 'react-native-progress-circle';

export default class CircularProgressExample extends React.Component {
  render() {
    const { progress, radius, borderWidth, color } = this.props;
    const strokeDasharray = radius * Math.PI * 2 / 100;

    return (
      <View style={styles.container}>
        <ProgressCircle
          radius={radius}
          progress={progress}
          indeterminate={false}
          color={color}
          borderWidth={borderWidth}
          bgColor="lightgrey"
          strokeLinecap="butt"
          renderCap={() => null}
          style={styles.progressCircle}
        >
          <View style={styles.textContainer}>
            <Text style={styles.text}>{progress}%</Text>
          </View>
        </ProgressCircle>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  progressCircle: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  textContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'white',
  }
});