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

标签：进度条 transform height react width let 112 100 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]}>
                        <Animated.View style={[styles.rightHalfCircle ,rightTransform()]}></Animated.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 });
    };

 

标签：进度条,transform,height,react,width,let,112,100,native
From： https://www.cnblogs.com/tlfe/p/16721657.html