如何让ProgressBar占据View容器的剩余宽度答案

【问题标题】：How to make the ProgressBar occupy the remaining width of the View container如何让ProgressBar占据View容器的剩余宽度
【发布时间】：2021-11-11 23:28:31
【问题描述】：

我想要实现的目标：我想要一个包含两个元素的水平视图：

文字
ProgressBar（从 React Native Paper 导入）

我希望文本根据需要占用尽可能多的空间（适合内容）。其余宽度应由 ProgressBar 占用。

到目前为止我所做的尝试：

                <View style={{
                               flexDirection: 'row',
                               alignItems: 'center'
                   }}>
                    <Text>Difficulty:</Text>
                    <ProgressBar
                        progress={0.2}
                        color="#5E84E2"
                    />
                </View>

通过上述设置，ProgressBar 甚至不可见。我做错了什么？

【问题讨论】：

什么是ProgressBar？
你问的是 React-Bootstrap ProgressBar？
对不起，我不清楚。它的 React Native 和 ProgressBar 是来自 React Native Paper 的组件。

标签： reactjs react-native react-native-paper

【解决方案1】：

您可以将flex:1 分配给进度条视图以适应剩余空间

<View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
    }}>
    <View>
      <Text>Difficulty:</Text>
    </View>
    <View style={{ flex: 1 }}>
      <ProgressBar progress={0.5} color="red" />
    </View>
  </View>

预览：https://snack.expo.dev/Ef39fDbCK

【讨论】：

你为什么把Text和ProgressBar放在单独的Views里。我们不应该直接在ProgressBar 上使用style 吗？
@Rechu 因为它不能那样工作。 ProgressBar 的默认值为width=auto，它将填充其父级的宽度。您可以通过将宽度定义为道具来覆盖它，但您的问题是关于填充文本后的剩余空间。这将由 flex 完成。现在您可以将文本更改为更长的值，ProgressBar 的宽度将在此基础上更改。
同样的规则是否也适用于Text（文本的宽度设置为自动）？对了，你从哪里找到ProgressBar的宽度是auto的信息？我认为我在开始时误解了 React 中的布局是如何工作的。
@Rechu React 使用的是FlexBox，width 和height 的默认值为auto。我认为您需要阅读它们的文档，这些问题与原始主题无关，但仅供参考，您的代码需要 flex 并且您应该用 View 将它们包装起来，以便并排放置两列。如果您对使用View 有任何问题，请说明原因，否则如果这解决了您的问题，您可以投票并选择我的答案。
现在我在工作，但一旦我完成，我会检查你的方法并投票。感谢您的及时回复！