react native 圆形环进度条

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';

const CountdownTimer = () => {
  const [progress, setProgress] = useState(50);

  useEffect(() => {

  }, []);

  return (
    <View style={{justifyContent:'center', alignItems:'center'}}>
      <AnimatedCircularProgress
        size={200}
        width={10}
        fill={progress}
        tintColor="#ff0000"
        backgroundColor="#cccccc"
        rotation={0}
        lineCap="round"
      >
        {(fill) => <Text>{progress}</Text>}
      </AnimatedCircularProgress>

      <View style={{justifyContent:'space-between', flexDirection: 'row'}}>

        <TouchableOpacity onPress={() => setProgress(progress + 5)}>
          <View style={{ width: 100, height: 50, backgroundColor: 'green' }}>
            <Text>+5</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity onPress={() => setProgress(progress - 5)}>
          <View style={{ width: 100, height: 50, backgroundColor: 'red' }}>
            <Text>-5</Text>
          </View>
        </TouchableOpacity>
      </View>

    </View>
  );
};

export default CountdownTimer;