如何让React Native Paper的ProgressBar占满View容器剩余宽度

问题原因 #

在flexDirection: 'row'的Flex行容器中，未设置flex属性的子元素默认仅占用自身内容所需宽度。React Native Paper提供的ProgressBar组件无默认固有宽度，在未明确指定宽度也未配置flex属性的场景下，宽度会被压缩为0，因此完全不可见。

解决方案 #

给ProgressBar组件添加flex: 1的样式即可，该属性会让ProgressBar占用父容器分配完Text自适应宽度后的全部剩余空间，刚好匹配你的布局需求。
修改后代码如下：

<View style={{
  flexDirection: 'row',
  alignItems: 'center'
}}>
  <Text>Difficulty:</Text>
  <ProgressBar
    style={{ flex: 1, marginLeft: 8 }} // marginLeft为可选配置，用于拉开文字和进度条的间距
    progress={0.2}
    color="#5E84E2"
  />
</View>

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