ReactNative圆形进度条 ART Path arcTo 圆弧实现

重点实现进度的核心就两个

• 一个是根据角度计算终点坐标 sin cos
• 一个是push方法 用圆弧 将两个点连起来
• 传入一个radius 我回根据半径计算这个圆的顶点坐标 默认中心最上的点为起始点

效果图

使用方法很简单

               <CircleProgressView progress={this.state.progress}>
                    <View style={{backgroundColor: '#987123', flex: 1,  alignItems: 'center'}}>
                        <Text>外部放入进度条中间的内容</Text>
                    </View>
                </CircleProgressView>

                <AnimatedCircleProgress progress={this.state.progress}>
                    <View style={{backgroundColor: '#987123', flex: 1,  alignItems: 'center',justifyContent:'center'}}>

                        <AMAText value={this.state.progress}/>

                    </View>
                </AnimatedCircleProgress>

• 复杂配置 

---

因为进度条是一个单独的组件 所以中间部分 我没有写死 中间区域留了一个位置 可以插入你想插入的View

效果图中间的数字动画使用Animated.createAnimatedComponent实现

• 中间留空的区域 是根据传入的半径 获取到了圆的区域 在计算中间内切正方形的区域 在通过绝对布局left top实现 具体可以看代码

---

代码就不贴了 github有 如果对RN的ART arcTo 圆弧 不太熟悉的 可以看看Demo 希望有帮助

详细解说介绍地址--->(learn more)