React-native定制化进度条 && 少半圆效果

需求是做一个进度条

如上所示：我需要做一个定制化的进度条，这个问题看起来不是很复杂，但是要求这个进度条结点数量可变…（效果如下)

怎么做呢？？
1.我们可以通过canvas的方式画一个类似的进度条，但是在rn中使用canvas目前是需要花费比较大的代价
2.使用定位的方式，通过 进度条+圆形节点的方式，让圆形节点通过定位的方式固定在进度条上，利用后端传入的当前等级(currentLevel：number)，new Array(currentLevel).fill(0).map(item=>绿色圆点)
new Array(totalLevel-currentLevel).fill(0).map(item=>无色圆点), 将这两部分定位在进度条上即可达到上述效果

如果我们还想实现进度条的不满圆状态，如第一张图的，可以参考下边的代码实现一个不满圆，此时改变子项View的width即可控制不满圆的进度的渲染，不过需要我们对于进度加以计算

		//rn实现少半圆效果
        <View style={{
          overflow: 'hidden',//这行代码不可省略
          top: 30,
          backgroundColor: "#CBCBCB",
          height: 18,
          width: 18,
          borderRadius: 9,
          marginTop: 20
        }}>
          <View style={{ width: 6, height: 18, backgroundColor: 'rgba(34,171,148, 1.0)' }}></View>
        </View>