重點實現進度的核心就兩個

• 一個是根據角度計算終點座標 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 希望有幫助