CircleProgress base on ReactNative ART
重点实现进度的核心就两个
- 一个是根据角度计算终点坐标 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 希望有帮助