如何为react-native-progress的Progress.Bar内部进度条设置borderRadius

原因说明 #

你设置的borderRadius属性仅作用于Progress.Bar的外层容器，内部已填充进度条的圆角默认不会继承外层设置，给组件根style添加borderRadius也不会作用到内部进度条元素上，因此无法实现预期效果。

修复方法 #

方案一：使用官方提供的progressStyle属性（推荐） #

直接使用组件暴露的progressStyle配置项定制内部已填充进度条的样式即可，你设置了外层高度为10、padding为2，因此内部进度条的实际高度为6，将progressStyle的borderRadius设为3即可实现完全圆角的效果，修改后的代码如下：

<Progress.Bar
  color={'rgb(128,0,128)'}
  progress={0.5}
  borderWidth={1}
  borderColor={'rgba(128,0,128,0.2)'}
  unfilledColor={'white'}
  height={10}
  borderRadius={7.5}
  width={200}
  style={{ padding: 2 }}
  // 新增progressStyle配置内部进度条圆角
  progressStyle={{ borderRadius: 3 }}
/>

该方案不需要修改原有结构，适配进度为0%、100%等所有进度场景的圆角表现。

方案二：外层容器包裹实现 #

如果方案一没有生效，你可以将边框、padding等逻辑移到外层自定义View上实现，代码如下：

<View style={{
  width: 200,
  borderWidth: 1,
  borderColor: 'rgba(128,0,128,0.2)',
  borderRadius: 7.5,
  padding: 2,
  overflow: 'hidden'
}}>
  <Progress.Bar
    color={'rgb(128,0,128)'}
    progress={0.5}
    borderWidth={0}
    unfilledColor={'white'}
    height={10}
    borderRadius={3}
    width={196}
  />
</View>

内容的提问来源于stack exchange，提问作者Hardik Desai