react-native 实现环形(圆形)进度条

废话不多说，直接上硬货：
效果图

 

 

 

安装 react-native-anchor-point 用于处理旋转中心点位置

yarn add react-native-anchor-point

github仓库地址： https://github.com/sueLan/react-native-anchor-point

圆形进度html结果样式

<View style={[styles.round]}>
                    <View style={[styles.leftCircle, styles.Circle]}>
                        <View style={[styles.leftHalfCircle, leftTransform()]}></View>
                    </View>
                    <View style={[styles.rightCircle, styles.Circle]}>
                        <View style={[styles.rightHalfCircle ,rightTransform()]}></View>
                    </View>
                    <View style={[styles.percentage]}>
                        <Text style={{color: '#121214',fontWeight:'600',fontSize:14}}>{schedule}%</Text>
                    </View>
                </View>

Circle:{
        width:'50%',
        height:112,
        position: 'absolute'
    },
    leftCircle:{
        left: 0,
        overflow: 'hidden'
    },
    rightCircle:{
        right: 0,
        overflow: 'hidden'
    },
    leftHalfCircle:{
        width: '100%',
        height: 112,
        borderTopLeftRadius: 100,
        borderBottomLeftRadius: 100,
        backgroundColor: 'rgb(65,69,255)'
    },
    rightHalfCircle:{
        width: '100%',
        height: 112,
        borderTopRightRadius: 100,
        borderBottomRightRadius: 100,
        backgroundColor: 'rgb(65,69,255)',
    },
    percentage:{
        width: 64,
        height:64,
        backgroundColor: '#fff',
        borderRadius:100,
        justifyContent:'center',
        alignItems:'center'
    },
    round:{
        marginTop: 16,
        width: 112, 
        height: 112,
        backgroundColor: '#F5F5FA',
        borderRadius: 100, 
        marginRight: 73,
        justifyContent:'center',
        alignItems: 'center'
    },

    let total = 100

    let [schedule, setschedule] = useState(22.5)

    let deg = Number((schedule/total)*360).toFixed(1)

    let [leftSchedule, setLeftSchedule] = useState(-180)

    let [rightSchedules, setRightSchedules] = useState(180)

    useEffect(()=>{

        if(deg > 180){

            setLeftSchedule(0)

            setRightSchedules(deg)

        }else{

            setLeftSchedule(180 - deg)

        }

    },[])

    const rightTransform = () => {
        let transform = {
            transform: [{ rotateZ:  -leftSchedule + 'deg' }],
        };
        return withAnchorPoint(transform, { x: 0, y: 0.5 }, { width: 56, height: 112 });
    };
    const leftTransform = () => {
        let transform = {
            transform: [{ rotateZ: rightSchedules + 'deg' }],
        };
        return withAnchorPoint(transform, { x: 1, y: 0.5 }, { width: 56, height: 112 });
    };