如何修改Progress.CircleSnail进度圆环的中心颜色？

我用以下代码实现了进度圆环：

<View style={styles.loadingBar}>
   <Progress.CircleSnail color={'#5719a8'} indeterminate={true}/>
</View>

查阅相关文档后，没找到能修改其中心颜色的属性，效果如图：

解决方案 #

由于Progress.CircleSnail本身没有提供修改中心颜色的官方API，可通过以下两种嵌套View的方式实现需求：

1. 利用外层View背景色+内边距露出中心
   在外层设置一个带圆角的View，通过内边距控制圆环的宽度，让外层背景色作为圆环的中心颜色：

<View style={{
  backgroundColor: '#FFFFFF', // 替换成你需要的中心颜色
  borderRadius: 50,
  padding: 4, // 内边距越大，圆环越细
  width: 80,
  height: 80,
  justifyContent: 'center',
  alignItems: 'center'
}}>
  <Progress.CircleSnail 
    color={'#5719a8'} 
    indeterminate={true}
    size={72} // 圆环尺寸 = 外层View尺寸 - 2*padding
  />
</View>

2. 绝对定位圆形View覆盖中心
   通过绝对定位在圆环上方叠加一个更小的圆形View，直接覆盖中心区域：

<View style={{
  position: 'relative',
  width: 80,
  height: 80,
  justifyContent: 'center',
  alignItems: 'center'
}}>
  <Progress.CircleSnail 
    color={'#5719a8'} 
    indeterminate={true}
    size={80}
  />
  {/* 中心覆盖层 */}
  <View style={{
    position: 'absolute',
    width: 64, // 比圆环尺寸小，露出环形部分
    height: 64,
    borderRadius: 32,
    backgroundColor: '#FFFFFF' // 替换成你需要的中心颜色
  }} />
</View>

内容的提问来源于stack exchange，提问作者Josh Nolan