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

Question

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

文字
ProgressBar（从React Native论文中导入）

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

到目前为止我尝试了什么:

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

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

Answer 1

您可以给进度条视图 flex:1 以适应剩余的 space

<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

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

How to make the ProgressBar occupy the remaining width of the View container

reactjs

react-native

react-native-paper